jQuery Page scroll plugin

Finegrained control over page scrolling.

Usage:

$('a').pageScroll();

Illustration of options:

Page links, default behaviour:

$('a').pageScroll();

ID anchor
ID anchor with dot in name

Page link with options set:

$('a.special').pageScroll({
	duration: 2000,
});

Link with duration set

Page link with target:

$('a.target').pageScroll({
	target: $('#target')
});

Link with anchor set

Scroll at mouseover event:

$('a.mouseover').pageScroll({
	target: $('#target'),
	event: 'mouseover'
});

Link with mouseover event set

Page link with before and after scroll options set:

$('a.beforeafter').pageScroll({
	willScroll: function(opts) {
		alert("before scroll; duration=" + opts.duration);
		// speed up
		opts.duration = 200;
	},
	willScrollDelay: 600,
	didScroll: function(opts) {
		alert("after scroll; duration=" + opts.duration);
	},
	didScrollDelay: 600
});

Before and after

Page link with before function delegate to conditionally stop scrolling:

$('a.stop').pageScroll({
	mayScroll: function(opts) {
		var stop = confirm("Stop scrolling?");
		if (stop) {
			return false;
		} else {
			return true;
		}
	}
});

Stop scrolling

Scroll on page load:

if (location.hash) {
	// hide body before forcing to top
	$('body').hide();
	// secretly go to top
	window.scrollTo(0, 0);
}

$(window).pageScroll({
	id: location.hash,
	event: 'load hashchange',
	speed: 700,
	maxDuration: 2000,
	mayScroll: function(opts) {
		if ($('body').is(':hidden')) {
			$('body').show();
		}
	},
	willScrollDelay: 500
});

Test this by visiting this anchor and then reload the page.

The rest of this page is filler content to have something to scroll to.

Proin leo turpis

Proin leo turpis, lacinia nec laoreet at, pretium a urna. Maecenas ac nibh id metus blandit posuere non quis dui. Nunc commodo orci commodo felis ullamcorper in consequat leo pharetra. Nam consequat lectus nec lacus fermentum ultrices. Suspendisse massa metus, faucibus mollis ornare nec, porta nec odio. Praesent a enim quis sem sollicitudin laoreet. Donec nec est ante, sed pretium tellus. In aliquam ligula aliquam arcu tempor blandit sagittis sapien luctus. Sed ut urna vel nulla scelerisque suscipit nec ac erat. Suspendisse ipsum erat, euismod ultrices accumsan nec, accumsan nec sem. Morbi felis lorem, mollis suscipit viverra non, interdum laoreet lectus. Nunc molestie congue semper.

Quisque sed lorem ac urna pulvinar dapibus eu a lectus. Mauris tincidunt ultrices ultrices. Nulla at odio auctor metus varius viverra et vel ante. Duis hendrerit varius euismod. Aliquam rhoncus arcu ut velit posuere tincidunt eleifend nunc accumsan. Etiam ac leo sed metus adipiscing commodo. In hac habitasse platea dictumst. Nulla metus est, vehicula in sollicitudin non, pulvinar at ante. Nunc sed nisi nibh. In bibendum, nunc non sagittis ornare, lorem ipsum feugiat velit, et tempus leo mauris et dui.

Donec tempor enim feugiat nisl congue eu sagittis ante blandit. Phasellus vitae tortor pellentesque nibh cursus porta. Quisque nisi purus, lobortis quis tempus sed, lobortis nec enim. Sed gravida, nisl blandit mollis pharetra, nisl diam consequat arcu, consequat molestie justo nulla id augue. Suspendisse eget consectetur enim. Nullam a purus quis lectus egestas ultricies. Donec turpis arcu, dignissim semper condimentum in, eleifend a augue. Nulla ac nisi molestie mauris commodo tristique ac sit amet odio. Nulla vel tellus a felis gravida auctor nec eu urna. Pellentesque a nisi at enim tincidunt rhoncus eget sit amet turpis. Sed feugiat blandit purus nec venenatis.

Mauris convallis pretium risus, eget vulputate quam egestas ut. Nullam facilisis bibendum quam laoreet varius. Donec in leo a eros tincidunt tincidunt. Aliquam fermentum pellentesque rutrum. Nunc hendrerit pharetra augue a lacinia. Phasellus tempor commodo leo id lacinia. Integer sit amet cursus quam. Cras tortor leo, consectetur et eleifend id, venenatis ac nibh.

jQuery Page scroll plugin

Proin leo turpis

ID anchor

ID anchor with dot in name

Target anchor