Javascript Smooth Scrolling Down A Page

Just wondering if there was any way which you can use javascript in order to have smooth scrolling down a page. I don't mean href's like #section1 ect. I mean actual mouse wheel sc

Solution 1:

Try this: Smooth scrolling demo

You can try something like this:

1. Get the current top location using self.pageYOffset
2. Get the position of element till where you want to scroll to: element.offsetTop
3. Do a for loop to reach there, which will be quite fast or use a timer to do smooth scroll till that position using window.scrollTo

NOTE: Solution is just rough idea, not crossbrowser at all.

Solution 2:

This is surely possible.

I assume you don't want to build it from scratch, so here's a jQuery plugin.

What this plugin does is to listen to mousewheel and DOMMouseScroll events, and executes a custom, smooth scroll when they're triggered.

Solution 3:

You can easily do it with jquery without any plugin, and you can even decide how much time the scrolling should take.

For instance, if you have an element with id scrollhere in the point you want to reach, and attach a click listener that will start the animation to a button or a link with id scroll:

$("#scroll").click(function() {
    $('html, body').animate({
        scrollTop: $("#scrollHere").offset().top
    }, 2000);
});