Smooth scrolling to page top and bottom using jQuery

0

If you have a lengthy article that consists of multiple sections and the topics are related to each other. You can link them using named anchor, but it does not give a smooth scroll effect. In this tutorial you will see how to apply Smooth scrolling effect when user go to the bottom section of a page or when user go at the top section of a page. User can also scroll to a particular section of a page using the same technique. This technique is used in this my blog also.

View Demo

Adding jquery dependency and page top container

Since the tutorial is based on jquery make sure you have included jquery library file inside your page.

Just below the body tag add an element that serves as a page top container i.e. when user wants to go to the top element it will reach upto this element. You can add id or class also as per your style.

Applying smooth scrolling to page bottom effect

First of all you have to add an image/text indicating that if user clicks on this element it will scroll down to the bottom of page.

At the top/bottom of the page bind the class scrollBottom to click event. You will need to calculate the difference between page scroll height and the page height.

Applying smooth scrolling to page top effect

Just like above, add an image/text indicating that if user clicks on this element it will scroll to top of the page. But in this case there is one catch. it’s a good idea to display the icon/image when the user has scrolled to mid/bottom of the page. Makes sense? In other words you don’t want to display an icon that says “scroll to top” when you are at the top of page. I have fixed the icon position at the bottom right section of the page using CSS. it will be only visible when user scroll down to mid/bottom of page (using jquery).

Bind the class scrollTop with click event. Also display/hide the icon based on page height.

Applying smooth scrolling to a particular element

Well this one is the easy. Just like above, add an image/text indicating that if user clicks on this element it will scroll to a particular section of a page.

Add an element using id or class where the user will reach after clicking on the icon/text.

Just the final part, bind the class scrollMidsection with click event.

View Demo
Download

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.