#Smoothscroll code#

For code changes, please work on the 'source' file: src/.

Thank you! Please consider the following when working on this repo before you submit a pull request: Therefore, will be called against no elements (which, in most cases, These methods return a jQuery object containing an empty array, just likeĪll of jQuery's other DOM traversal methods. To determine which element is scrollable. $.fn.firstScrollable DOM traversal method (also defined by this plugin)

The plugin's $.fn.smoothScroll and $.smoothScroll methods use the.

It does not look at the element's name attribute.

To determine where to scroll the page, the $.fn.smoothScroll method looksįor an element with an id attribute that matches the element's hash.

Exclude links if they are within a containing element: $('#container a').smoothScroll(,.

Specify a containing element if you want: $('#container a').smoothScroll().

Works like this: $('a').smoothScroll().

You can try a bare-bones demo at /jquery-smooth-scroll/demo/ Features $.fn.smoothScroll (thisNode.offsetParent != document.Go to the following URL in your browser and copy/paste the code into your own file: First, we find the position of the destination link: var destx = destinationLink.offsetLeft This is where Andy Clover’s notes are invaluable. Now all we need to know is where we are in the document, and what our destination is.

We know what we clicked on, and what that points to. If we didn't find a destination, give up and let the browser do Var allLinks = document.getElementsByTagName('a') Now loop all A tags until we find one with that name Links have a hash attribute that contains the # and the section that appears after it in the URL, so let’s now walk through all the links in the document and check whether their name attribute is equal to the hash part of the clicked-on link: // First strip off the hash (first character)

Now, we need to find the destination: the tag that corresponds to the part after the hash in our clicked-on link. Just to be paranoid, we also check that what we’ve got is an A tag, in case we’ve missed something: if (() != 'a') return The useful location object tells us about the URL of the document we’re looking at now, so try this: for (var i=0 i smoothscroll

We need to walk through this list, and work out which of the links we’ve found are internal. Getting a list of all the links is easy: var allLinks = document.getElementsByTagName('a') Finding Internal Linksįirst, we need to identify all the links in the document, and then work out which of them are internal ones. In this tutorial, we’ll use a smattering of JavaScript to ensure that links that are internal to the document scroll the user to their destination, rather than jumping straight there and confusing users. The answer to this problem is to scroll the user through the document to the linked location, like this. When they’re navigating through a long document, users often are confused or disoriented when they click a link that jumps to another location in that same document.Īre they on the same page, or a different page? Should they scroll more from here? What’s going on?