Smooth Page Scroll with jQuery

Smooth Page Scroll with jQuery

   Leave a comment   
http://bit.ly/1em3AKy

Many 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  0)
		{
			return el;
		}
		else
		{
			$scrollElement.scrollTop(1);
			var isScrollable = $scrollElement.scrollTop()> 0;
			$scrollElement.scrollTop(0);
			if (isScrollable)
			{
				return el;
			}
		}
	}
	return [];
}

Code Source

Leave a Reply

Your email address will not be published. Required fields are marked *