About design and nearby

Smooth Scrolling with jQuery

Posted: December 24th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | 2 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) {
  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) {
  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 () {
  3.                 $(".anchorLink").click(function () {
  4.                     $("html, body").animate({ scrollTop: 0 }, "slow");
  5.                     return false;
  6.                 });        
  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

Check Related Posts:

2 Comments on “Smooth Scrolling with jQuery”

  1. 1 Eduard said at 10:40 pm on June 4th, 2015:
    Reply  |  Quote

    Great post. Works perfect.

    But I have a question.

    The action is triggered from a click on the link “tab1″.

    What I also need, is to trigger the action from a GET-parameter. For Example:

    When another page is linking to this page is should scroll to tab 7.

    So how to I activate the trigger within PHP depending on a variabele?

    Is that possible?

    Thanks in advance.

  2. 2 julia said at 3:57 pm on June 5th, 2015:
    Reply  |  Quote

    Hi Eduard,
    I think, you could use header(“Location: http://” . $_SERVER[‘HTTP_HOST’] . “/your-page#tab7/”); for redirect to the required page (and set   there). To achieve the smooth scrolling effect you should give variables via GET parameters and process custom jQuery at the target page. So yes, that’s possible and requires custom development.

Leave a Reply

  • 9 × = thirty six