jQuery Smooth Page Scroll For Websites

jQuery-Website-Smooth-ScrollThis tutorial is to implement a smooth jQuery scroll for websites to scroll from top to bottom. Easy way to enable awesome jQuery smooth page scroll for your websites.

In one of our previous tutorial, we had see how to add a fading “Go Top” button using jQuery. That tutorial can be combined with this tutorial to produce a much cooler effects. Coming to this tutorial, we sometimes need a fast and quick scroll enabled for the users to scroll to top after reading the entire content or after seeing the entire content, similarly the users also need to scroll to bottom to see who is the author or to know about the blog.

It is always useful in what ever may be the case to have a fast and silky smooth scroll effects for any website. Today, we will experiment on how that can be achieved using jQuery framework and not by using any other extra scroll plugins. Below you can find the demo and download before checking the explanation.

DEMO | DOWNLOAD

EXPLANATION

HTML Markup used in our tutorial

The jQuery Magic

Basically, we need to use the above jQuery framework from jQuery.com to make this example work properly.

The above code enables the smooth scrolls to scroll up and down the website. We take the help of the link ids with name “scrollDown” and “scrollUp” as we have used it in our sidebar HTML, here is the snippet for reference once again:

For id=”scrollBottom

For id=”scrollUp

The jQuery snippet is called when the DOM is ready or loaded. This is how the initial function is written:

Once the document is loaded the function is called, hence we access the ids of the links one by one.

We access the link by using

and we say that activate something when there is a click event like this

So, when there is a click on the link with id scrollDown, the following function is activated:

Which says animate the whole setup. scrollTop is an inbuilt API, you can learn more about it from jQuery API website. access the height of the document and we also say that go slow.

scrollTop: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

Similarly, we do it for the next id, which is self explanatory.

DEMO | DOWNLOAD

Hope you enjoyed this tutorial, we will hunt for more design and developments for DesignHuntR. Stay in touch.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...