Smooth Page Scroll with jQuery
· 192 wordsMany popular websites have the ‘Back to Top’ same-page links, which allow you to get back to the top of the page quickly. Some websites even scroll upwards smoothly. This jQuery code, written by LearningjQuery, allows you to do just that. Just include this code in your $(document).ready() function and it enables itself on all same-page hash links.
jQuery
// SMOOTH-SCROLLING function filterPath(string) { return string .replace(/^//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(//$/,''); } var locationPath = filterPath(location.pathname); var scrollElem = scrollableElement('html', 'body'); $('a[href*=#]').each(function() { var thisPath = filterPath(this.pathname) || locationPath; if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) { var $target = $(this.hash), target = this.hash; if (target) { var targetOffset = $target.offset().top; $(this).click(function(event) { event.preventDefault(); $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { location.hash = target; }); }); } } }); // use the first element that is "scrollable" function scrollableElement(els) { for (var i = 0, argLength = arguments.length; i <arglength ; i++) { var el = arguments[i], $scrollElement = $(el); if ($scrollElement.scrollTop()> 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop()> 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } } return []; }</arglength>
∞