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
Great light weight implementation. Thank you.
this is exactly what i was looking for. Im kinda new to this and wondering if you could help me out. Im making a single page website and i want to use both prettyPhoto and scrollto at the same time... its all set, just not the scrollto...
Great script! You should include easing options too
Hey, great plugin! But my plugin don't scroll with animation. It's just a jump! I tried to put the time of the animation, but still not working. Do you know anything about it?
Thanks!
Awesome!!! Thank you very much
the time isnt working....i dont know why... im noob.
:-*
best
عالی بود
Nice work, thank you
Worked great, however I wanted to use it after loading content into bootstrap model div so I found a slight adjustment was need:
function scrollToElement(host, selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
var element = $(selector);
var offset = element.offset();
var offsetTop = offset.top + verticalOffset;
$(host).animate({
scrollTop: offsetTop
}, time);
Magic
I found this to be the best solution out there, lightweight and smooth.
Until I got stuck, and took me a while to figure out the bug:
THIS messed up the scrollToElement js, when applied to html and body:
overflow-y: scroll; /* has to be scroll, not auto
-webkit-overflow-scrolling: touch;
---
Just so everyone knows.