About design and nearby

Smooth Scrolling with jQuery

Posted: December 24th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

If you ever have to read a long document, scrolling all the way through it to find what you need can be annoying. This case a smooth scroller seems to be a solution, it helps with navigation and you enhance usability on the website with sleek navigation controls.

As for my mind, such sweet )) scrolling is fine for pages which list all links at the top and the relevant content – below (FAQ pages, Terms pages) or ‘back to top’ links.

This technique is based on the jQuery library.

There are 2 parts of scrolling script: the first script is for scrolling to the very top of the page and the second one – to scroll to the certain place of the page.

1. Scroll the page to the top

At the body section I defined elements with class ‘anchorLink’:

  1. <a href="#" class="anchorLink">Top &uarr;</a>

When the link with the class ‘anchorLink’ is clicked, the smooth scroll effect is created using the scrollTop function (I set the speed as ‘slow’):

  1. $(".anchorLink").click(function () {
  2.          $("html, body").animate({ scrollTop: 0 }, "slow");
  3.          return false; // prevents the default action of the event being triggered
  4. });


2. Scroll the page to the certain element

I set elements with class ‘anchorLink2′ at the body section:

  1.  <a class="anchorLink2" data-atr="tab1" href="#tab1">Tab1</a>

The function is for every element with class ‘anchorLink2′ – when it’s clicked:

  1. jQuery('.anchorLink2').click(function (event) {
  2.  
  3. });

To tie class ‘anchorLink2′ to the relevant paragraph (for example, for the first one), I add custom attribute ‘data-atr’ and href attribute:

  1.  data-atr="tab1" href="#tab1"

and at the paragraph section –

  1.  <a id="tab1">&nbsp;</a>

The jQuery script is

  1. jQuery('.anchorLink2').click(function (event) {
  2.  
  3.       event.stopPropagation();                
  4.       var idTo = jQuery(this).attr('data-atr');  // My custom attribute 'data-atr'      
  5.       var Position = jQuery('[id="' + idTo + '"]').offset().top;              
  6.       // Scroll down to 'Position'
  7.       jQuery('html, body').animate({ scrollTop: Position }, 'slow');
  8.       // Stop the link from acting like a normal anchor link (i.e. it prevents the user following the link)
  9.       return false;
  10. });

The full solution is

  1. $(document).ready(function () {
  2.  
  3.                 $(".anchorLink").click(function () {
  4.                     $("html, body").animate({ scrollTop: 0 }, "slow");
  5.                     return false;
  6.                 });        
  7.  
  8.                
  9.                 jQuery('.anchorLink2').click(function (event) {
  10.                     event.stopPropagation();                
  11.                     var idTo = jQuery(this).attr('data-atr');                
  12.                     var Position = jQuery('[id="' + idTo + '"]').offset().top;
  13.                     jQuery('html, body').animate({ scrollTop: Position }, 'slow');
  14.                     return false;
  15.                 });
  16. });

Live example: check the example >>

Share Button

Leave a Reply

You must be logged in to post a comment.