In today's front-end landscape of responsive, mobile-friendly sites, I'm finding a frequent need to scroll the user (either up or down) to various different elements on the page. This article will show you a simple, lightweight way to do this...
'Back to top' buttons, 'Jump to menu' buttons, 'Jump to widget' links... there are now all sorts of situations where you would want to smoothly scroll the user to a certain element on the page.
There has been a jQuery plugin around for quite a while that can accomplish this, Arial Flesler's ScrollTo.
This is a wonderful plugin that allows you to scroll in all sorts of different ways.
However, if all you want to do is scroll up or down to an element, by using a selector, then you may prefer this lightweight function:
function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
}
Here's how you might use it to scroll to an element with an ID of 'content' when the user clicks a 'Jump to content' button:
$('a.jump-to-content').click(function () {
scrollToElement('#content');
});
You can also specify the duration of the scroll animation (in miliseconds):
scrollToElement('#content', 500); // scroll the element #content, and take 500ms to get there
And you may also want to specify a vertical offset. The following will scroll the user to 150px above the #content element:
scrollToElement('#content', 500, -150); // scroll to 150px before the element #content, and take 500ms to get there
where can i download this script?
Very nice . I like this scroll to top.
Hey!
Excellent, light, precisely what I needed.
Big thanks!
just what i needed, danke!
does not work in IE 9
THANK YOU! Exactly what I was looking for this evening!
awesome
thanks
Gracias!
Great work keep it up
awesome script! Thank you!
Works nicely, however, how would I get it to do a relative scroll (not from the top)?
For example, if I click your example to "Scroll to 75px before Content, with animation time of 1000ms" then I want to scroll to "Scroll to Navigation" *without* having to "Scroll to top". Can your code do that? If so, how?
Worked flawlessly. Thank you