kswedberg / jquery-smooth-scroll Goto Github PK

Hi Karl,
thanx for this great plugin.
As I'm a newbie with jquery, I can't find out if it's possible to change the offset, for example when resizing the window.

but it should ;) or it will be nice if there was such an option for this.

Smooth scrolling used to work, but since I switched to jQuery 1.9.1 Chrome says "Object [object Object] has no method 'smoothScroll'" and Safari says "'undefined' is not a function (evaluating '$("a.smooth").smoothScroll()')".
I am including the plugin and jQuery correctly, and as I said, it worked before I switched to 1.9.1.
You can check out a page where smooth scrolling should work here:
http://versbeton.nl/2013/02/toiletjuffrouw-aleida-aan-het-nieuwe-station-is-niks-leuk/

Thanks for any hints or fixes!

I had 3 anchor links on my page, two of which were scrolling to the right place, and one which was wrongly going to the top. After a bit of trial and error and a JS Fiddle later, I realized that this only works for anchor links that link to scroll targets with the same ID, but not NAME.

Name is equally valid:
http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id

I've changed my element to use an ID so it the smooth scroll would work. If anything, it's worth pointing out on the docs.

Is there a way to add css to the target's link?

Here is my (non js) demo:
http://smartpeopletalkfast.co.uk/jump/jumpmenu.html

As the link's are always visible, I want them to be highlighted if your on that area of the page they link to.

Thanks

I'm not sure but there is an issue such as NOT a function. How is this possible as nav links work and scroll but opposite it will be validated Javascript code with an error. Do you have any idea what is wrong? Website is not published to show you source code as it is testing.
Error: TypeError: jQuery.smoothScroll is not a function
Source File: Line: scrollTarget: link.hash
jQuery(document).ready(function() {
jQuery('ul.mymenu1 a').smoothScroll();
jQuery('ul.scrollto1').click(function(event) {
event.preventDefault();
var link = this;
jQuery.smoothScroll({
scrollTarget: link.hash
});
});
});

$('#container').smoothScroll() - doesn't work

$.smoothScroll() - works

I would like to use an easing option like 'easeOutBounce' from JQuery UI.
Is it possible or is the plugin not set up to support those?

How can I exclude certain links from scrolling? Following the instructions provided, it doesn't seem to work:

<ul class="nav">
<li class="active"><a href="#home" title="home">home</a></li>
<li><a href="#about" title="about">about</a></li>
<li><a href="#services" title="services">services</a></li>
<li><a href="#portfolio" title="portfolio">portfolio</a></li>
<li><a href="#contact" title="contact">contact</a></li>
<li><a id="blog" href="http://mywebsite.com/blog" title="blog" >blog</a></li>
</ul>

$('#navbar ul.nav li a').click(function(event) {
event.preventDefault();
var link = this;
$.smoothScroll({
scrollTarget: link.hash,
speed: 500,
exclude: ['#blog']
});
});

Hi there,

I'm using your great smooth-scroll plugin for my new website which works except for the initial positioning of the scrollto.

I have a sticky nav, so i've made account for the nav size on scroll and offset its height (in my case by 86px).

However when i initially load the page and click to scroll anywhere from my navigation the offset doesn't seem work (or its not being taken into account), therefore the top of any page section i click to is cut off. However once i've clicked to a location and then scroll to another sections within the page (from the navigation bar) the offset now works fine and scrolls to the right position (i.e. taking into account the offset -86).

Not sure if you've come across this before? Sure it's something simple, but i'm not brilliant with jscript.

I've got my website locally at the moment so no code attached, but if my explanation doesn't make sense i'll set up a test site and forward the link.

Thanks a million for your help.

Matt

Just curious if this is possible.

I'm using a combination of isotope and smooth scroll. The navigation links already use the href element for isotope (to filter the content). Can smooth-scroll be applied to elements without an href? Through a class?

The menu navigation is fixed, so as you scroll to stays with you, if you click the links in the menu, the content changes. I'm wondering if the content can change and then smooth scrolls to the top — only problem is the href values are already in use. I'm wondering if I can apply the smoothscroll to the parent li element etc. The anchor link responds to isotope, and the li element responds to the smooth scroll so both can function at once.

This script works perfectly in all the other browsers but not in iPad/iPhone Safari..

Any ideas as to why?

Thanks

Hi :)

var version states 1.4.4 but comments headers say 1.4.5. Who's right ? ^^

Thanks !

Hello Sir,

Repeating the issue: Open the bbq.html demo. Click the "p1" link, manually scroll back up, then try to click p1 again. It doesn't scroll down.

Its a problem if you have a fixed menu and a user clicks p1 to go to #p1, scrolls around as they are reading, then tries to click p1 again to go back to the start of #p1.

It works as it should on the other demos.

Thank you for a great plugin

I was building an one page website with many subsections. The menu is a responsive css only toggle nav (http://www.joesnellpdx.com/toggle-navigation-no-javascript) utilising :target selectors for toggling the nav menu on mobile view. on desktop view the menu points are inline and always visible. the menu points are anchors and the transfer to the according sections is provided by smooth scroll.

In that specific use case of the toggle menu (mobile view) the preventDefault() method prevented the menu to work properly. when i commented out that one particular line everything worked fine. On the other hand on the desktop viewport if the preventDefault() line is commented out and if you click the same menu point twice you see a brief blink of scroll. if the preventDefault() method is uncommented nothing happens on second click. So it would be nice to be able to set an option for switching that particular method on and off.

i've tried a quick brute force hack and was reluctant to fill a pull request since i am far from being a js expert and i dont know if that suggestion makes sense at all and if the way i've solved it is clean and straight forward (the latter i highly doubt ;))) ). ;) the only two things i've changed and added are on one hand in the options object:

prevent: true,

and on the other hand in the preventDefault() line:

if(opts.prevent === true){
                event.preventDefault();
}

That's it. ;) Best regards Ralf

I had been using jQuery's localScroll for some time but then it stopped working on Chrome once jQuery updated to 1.8.0. I found smoothScroll and it works perfectly (and is smaller) on all browsers. However, it now doesn't work on the iPad and instead just jumps to the anchor.

Are there any fixes for this?
Rik

Hi there Mr Swedberg. Found your jquery smoothscroll and am impressed how highly it rates and so would like to utilise it in a site I am currently developing. However I have no jquery/programming skills and can't seem to find an instruction manual (not that it ever gets read anyway) on how to implement the code.

I've downloaded the zip file and see all the bits but have no idea what to link to or what to insert in the HTML to trigger the smooth scroll action.

Apologies for being a pain-in-the-behind noob but what am i missing?

Any chance of a simple quick guide? :)

Regards,

Diarmaid

I have read many posts but I still do not understand how I can make the scrolling smooth and slower.

Have a look here: http://www.allaboutdesign.nl

And please give me a clue.

We have an app where there is a menu that has links to inside the current page and to outside services. And we saw this behavior. If there was no scrolling needed the outside links will work fine. But if there is some scrolling needed Smooth Scroll will send you to the top of the page (and on a second click it will send you to the outside link).

We manage to get around this problem by using exclude/excludeWithin but IMO Smooth-scroll should realise this is an outside link and auto-exclude the links to other pages.

Hi,

We found some troubles using SmoothScroll on Android devices and iOS7 in Safari. iOS Chrome is working. But the other ones are not working correctly as nothing happens on the device when clicking on a #tag link. Any insights on that? We deactivated the feature for mobile devices for now.

Many thanks,
Wolfgang

Hi,

first of all thx for a nice plugin. You did a great job but i have small problem and dont know even when to start looking for an issue.

Im using twitter bootstrap and wordpress template. On top of page i got map where you click on marker and you are scrolled to info below about this point.

In my case smoth scroll is scrolling to much and miss then div i want to scroll to. This happends only on page load. After You scroll back to top and again click on marker smooth scroll seems to scroll to a right place.

im providing a link if You would like to see it.

http://dev.klycinski.com/fp/trasy/sladami-pruszkowskich-zydow/

Hi There,

I've been using your wonderful plugin for a site I've developed for a bit over a year and it works great. However, after upgrading to OSX Mountain Lion (10.5.8), it appears that the code I've used to implement your plugin stopped working in Safari 6 (8536.25) that ships with Mountain Lion. I'm not sure if it's your plugin code, or mine. The plugin works in all other browsers, except Safari 6. Here is how I've implemented the plugin:

<a onclick="scrollTo('.plateshade')">See details below.</a>

And scrollTo looks like this:

function scrollTo(anchor, speed)
{
    //alert("Smooth scroll to anchor: " + anchor);
    $.smoothScroll({

        scrollTarget: $(anchor),
        offset: -25,
        speed: speed,
        easing: 'swing'
    });
}

The above code worked fine in Safari prior to the Mountain Lion upgrade. Not sure why the upgrade would keep it from working though. Any suggestions where I should start fixing the problem?

Thanks!

--Arie

When using your cool scroll script, my scrollable plugin stops working (http://flowplayer.org/tools/scrollable/index.html)
This is due to the fact that you both make a function called scrollable.
Just thought you should know

It works fine on my local server. I uploaded the exact same files online but it's not working.
When I click on the link, the page didn't scroll down and not just go to the section that I want too. What happened after I click the link is the page is reloaded again and show the section that I want (no animation).
Anyone knows what's wrong with that?

This is an edge case, but on Android, when a link at the top of a page should trigger a smooth scroll, it is causing the address bar to be hidden (effectively scrolling to the top of the page), rather than scrolling to the desired element. I created a couple test cases for reference.

The first simply demonstrates the problem (Android only): http://jsbin.com/utukef
The second hides the address bar using Scott Jehl's script from his recent 24ways.org article: http://jsbin.com/ewegag
Scott's original post: http://24ways.org/2011/raising-the-bar-on-mobile

The problem occurs if the address bar is visible at all when you're at the top of the document. I saw the problem on Android 2.1 and Android 4.0 phones.

I'm just using Scott's script during testing on my project for now, but I may tackle implementing this into the plugin itself. In any case, I thought it was worth pointing out in case others encounter the same problem.

Scrolls properly only from top of the container. You can see this issue in demo, supplied with source code: just click twice at button.scrollsomething.

To fix it, add after $scroller defenition (~line 114):

scrollTargetOffset += $scroller.scrollTop();

(i don't know how it affects scrolling in case of body as container)

When having smaller document then window , and there is ofcourse no scrollbars then callback is never called.

$('html, body').scrollable().animate({scrollTop : (this_offset.top - 20)},'slow', function(){
        console.log('Should be always called');     
});

Hi,

I looked in the examples, but I couldn't find any reference to the script automatically adding the hash value to the URL after scroll.

For example, if I have a link such as #about, I would like the URL to be updated so that when I click the #about link, and when it finishes scrolling, the address bar shows example.com/#about

Thank you!

I’ve noticed in testing jQuery 1.6.1 that it seems to no longer be possible to call animate() on either the html or body elements (as in $('html, body').animate(aniprops); ). I tested it for scrollTop and width, and for both elements together and separately, and each time I receive this error in the WebKit console: TypeError: Result of expression 'f.easing[e.animatedProperties[this.prop]]' [undefined] is not a function.

As a result, I can't get this plugin to work with jQuery 1.6.1 (at least in Firefox and Chrome/Safari). Anyone else had an experience, positive or negative, with this functionality and jQuery 1.6.1?

It would be great if the scrolling could be stopped while it is ongoing by some means, e.g. via some option or some API call.

I haven't been known as being much of a "reader", but I'm not catching any licenses. Could you add something? MIT would work for my purposes.

Another option would be the "Karl Swedberg now owns your existence" license.

In the demo, when I click in any of the links on the top, they all scroll to the same place. Even stranger, in Chrome it always scrolls to div #p2, but in Firefox, it always goes to div #p1.

However, when I scroll to the bottom of the page and click on any of the links there, they all work as expected and scroll up to the right div (except the last one due to a typo... href="pp4").

Is anyone else getting the top links to work? I am also seeing the same behavior in the site I am trying to use smooth scroll on.

Thanks

Hello,

External links (to an anchor on another page) do not seem to work in your BBQ exemple : https://github.com/kswedberg/jquery-smooth-scroll/blob/master/demo/bbq.html

A link to demo/index.html#p5 from demo/bbq.html results in the page URL being changed to demo/bbq.html#p5 (and scrolling to that anchor if it exists), but I remain desperately stuck on the same page.

Any idea on how to go to the other page, then scroll to the anchor ?

Thanks.

Great plugin! Any intention of adding the ability to scroll horizontally?

Hi,
The new release is buggy, it triggers an error :

$.smoothScroll is undefined
http://static.monsiteweb.net/js/jquery.smooth-scroll.js
Line 34

It is related to the latest changes of the new release you made.

Thanks for fixing it ;-)

document.querySelector throws error when trying to pass illegal selector. But document.getElementById works fine. So, my simple solution:

scrollTarget: opts.scrollTarget || thisHash

was replaced by

scrollTarget: opts.scrollTarget || document.getElementById(thisHash.substring(1))

Anchors (id's) often are generated by CMS or script, so they may contain whitespaces and other illegal characters, so SmoothScroll often just don't work due to this issue.

Using this script on mobile (Nexus 5, Android 4.4, Chrome).

If overflow-x is set to hidden on the html ie, html{overflow-x:hidden}, vertical smooth-scrolling will be disabled and the default anchor functionality also fails to operate. Probably something simple I've missed, however disabling the script re-enables anchor functionality. Unsure why overflow-x disables VERTICAL smooth-scrolling.

Once I click on the multiple items of the menu it plays the animation for all items one after another. So I wish to play animation for a last clicked item only. So your advice on how to break previous animation (scrolling) would be so much appreciated.

Hi Karl,

Firstly, great plugin!

I am not really clear how I can control speed as you mention in the documentation.

This doesn't seem to work:
$.smoothScroll({ scrollTarget: '#id'}, 500);

Is this possible?

I tried the script in chrome, firefox, safari, ie but it doesnt work in opera..
My version of opera is 11.50 and using Windows..

I really like the this one, probably the best of scripts for scrolling out there, please fix this issue :/

I've got some id's in the DOM that contain slashes: <div id="/content/about">. Smooth scrolling to that id results in a jquery error. I understand that $('#/content/about') is not valid and that $('#\\/content\\/about'') will work, but I wasn't sure if there was something I was missing in smooth scroll to detect slashes and auto escape them when finding the element to scroll to.

Hi i ran into a specific issue i am unsure if it would be possible to fix with smooth scroll out of the box at the moment, and if not i would suggest that as a feature. ;)

I have a one page site, containing many sections. Smooth scroll is providing the scrolling to the different sections and from the end of each section back to the top.

On viewports for desktop devices the menu header is always visible with position: fixed at the top to navigate to the different sections. But on smaller viewports (e.g. mobile) i've switched the menu header to display: static.
On position fixed the scrolling distances are exactly as i've wanted them to be. Problem is on display: static those distances doesn't apply anymore. Is there a way to assign different scroll distances for the display: static variant? Best regards Ralf

Hi Karl,

First of all, thank you so much for sharing this fantastic plugin.

I have not fully tested this but, at least in some cases, when the target (e.g. a specific Id or Class) is not found then a scroll-to-top-of-the-page is performed. Can this behavior be prevented and just leave it to do no scroll at all?

Thanks.

Best Regards,
Diego

So right now I added the link to my html to the js file and the scrolling works wonderfully, but I am trying to apply the offset so that the fixed header on my site does not cover up the anchor it scrolls to. I am just confused where to put the options in my code without getting a uncaught type error.

Just wondering why not use <a name="p1"/> instead of <div id="p1"/>? That would seem to allow for more graceful degradation and allows for easy upgrade of pages that are already written using this more meaningful standard. Or am I missing something?

I guess I could always do <a name="p1" id="p1"/>, but it seems a bit redundant.

Thanks,
Peter

Dear Mr. Kswedberg,

I don't get a smooth scroll on this page:
http://www.greif-integra.de/egotango/

What could be the cause?

With regards,
Birke Heeren
www.greif-integra.de

Hi, great plugin! I particularly love the offset-option, very helpful with my fixed top-bar!

Is there a possibility to make smoothScroll() scroll to an element [a name="..."] instead of [p id="..."]?

My example:
[ul class="mainav"]
[li][a href="#alpha">alpha[/a][/li]
[li][a href="#beta">beta[/a][/li]
[/ul]

[div class="pagetext"]
[a name="alpha"][/a][h1]Alpha[/h1]
...
[a name="beta"][/a][h1]Beta[/h1]
...
[/div]

Many thanks, regards
Ben

Hello, title describes my problem. On PC in Safari/Chrome/Opera/IE is everything OK, but when I open website using smoothscroll on iPad 2, it simply jumps to anchors. Demo page here: http://podbitia.dev.blueweb.sk/ - try to navigate in main menu(3 anchors).

Is there something wrong with these apple devices? I used to use older scrollTo and that despite was scrolling, it was flickering and starting scrolling from top.

Firstly, this is awesome.

My jQuery skills are poor and I imagine this is a pretty dumb question, but anyway..

Just curious if it's possible to set two speeds for two different links? I'm already using this for one link:

jQuery(document).ready(function($){
$('a.start-button').smoothScroll({
speed: 6000
});
})

But I'd like to create another scrolling link which uses a different class. I've tried a few shot in the dark ideas but can't get it to work. It's probably a straight forward yes or no. At least I would hope.

Thanks,
Bill

Hi,

since chrome canary latest release, the plugin (v. 1.4.12, installed with bower) does not work any longer in this particular browser.

As it flawlessly does in other browers (all latest (official)chrome, firefox and safari), i suggest that this might be an canary related issue.

Can someone confirm this?

Thx
Olaf