This website uses cookies to personalise ads and to analyse traffic ok
web design

Animate page to id with jQuery

Using Page scroll to id jQuery plugin for smooth scrolling between same-page sections.

Page scroll to id works by connecting links in the form of <a href="#id">link</a>, to sections within the document, in the form of <div id="id">target</div>. The plugin replaces the default browser behaviour of “jumping” to page elements that have id equal to the hash (#) in the address bar, by preventing the url change and animating the page.

Normally, your markup should contain a list of links (as the page navigation) and the target elements (as the page sections) with your content

<ul id="navigation">
  <li><a href="#section-1">Section 1</a></li>
  <li><a href="#section-2">Section 2</a></li>
  <li><a href="#section-3">Section 3</a></li>
  <li><a href="#section-4">Section 4</a></li>
</ul>
<div id="content">
  <div id="section-1">
    Section 1 content
  </div>
  <div id="section-2">
    Section 2 content
  </div>
  <div id="section-3">
    Section 3 content
  </div>
  <div id="section-4">
    Section 4 content
  </div>
</div>

Download the plugin and extract jquery.malihu.PageScroll2id.min.js in the directory containing your html files.

Include jQuery library (if your project doesn’t use it already) and jquery.malihu.PageScroll2id.min.js in your document’s head tag or at the very bottom of your html, just before the closing body tag (recommended for better performance)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.malihu.PageScroll2id.min.js"></script>

After files inclusion, call mPageScroll2id function on links you want the plugin to handle

<script>
    (function($){
        $(window).load(function(){
            $("#navigation a").mPageScroll2id();
        });
    })(jQuery);
</script>

You may change "#navigation a" to some other selector according to your markup.

To change the animation speed, set the duration (in milliseconds) in scrollSpeed option parameter

$("#navigation a").mPageScroll2id({
  scrollSpeed:900
});

Page scroll to id provides a wide range of options and features include vertical and/or horizontal scrolling, ready-to-use classes for links highlighting, user defined callbacks, advanced scroll-to position offset and more. For more info and plugin documentation visit plugin homepage.

 


112 Comments

Post a comment

Comments pages: 1 2 3

  1. Chris
    Posted on March 17, 2015 at 13:31 Permalink

    Is it possible to setup the links from another page so that the scroll still works and also so that the page doesn’t refresh when you are already on the page you are linking to?

    Reply
    • malihu
      Posted on March 17, 2015 at 14:23 Permalink

      You can insert the full URL in the href attribute. The page won’t refresh (it’ll just scroll to the id) and the link will work from any page (although without animation).

      Reply
  2. Tord
    Posted on December 9, 2013 at 19:55 Permalink

    Hi,

    I’m still loving your plugin and found a compromise to the last problem.

    However I notice that if I call the plugin into WP via for instance <a href="#kontakt" rel="nofollow">, the scrollig works but the easing doesn’t.

    Is there a solution to this?

    Reply
    • Tord
      Posted on December 9, 2013 at 19:58 Permalink

      ah the code went into the comment.. here is what I wrote without the greater-than sign and less-than sign

      a href=”#kontakt” rel=”m_PageScroll2id”

      Reply
    • Mike
      Posted on December 11, 2013 at 14:36 Permalink

      Hi Tord, I also has the same problem you discussed earlier (link from another page not working)

      Can you please share your compromise?

      Reply
    • malihu
      Posted on December 11, 2013 at 16:26 Permalink

      Hello,

      I’ve almost finish the new version which fixes the bugs and offers more features. I’ll publish it in about a week (I’ll update github first and then the plugin archive and WordPress repo).

      Reply
  3. shumana
    Posted on December 3, 2013 at 02:59 Permalink

    hello! please disregard my first question about the responsive feature…

    i have one big hiccup with this otherwise amazing plugin. if i click the menu to any page and then want to scroll back up to the homepage, the scroll stops before it gets to the very top. i have an idea it’s because on the homepage i moved the header to the bottom of the page using position:relative but maybe i’m wrong. i have a full width royal slider slideshow on the home page so i just don’t understand why it doesn’t scroll all the way to the top of the slideshow. everything else works just fine.

    i’d really appreciate your help with this!

    Reply
    • Jon
      Posted on April 28, 2014 at 21:07 Permalink

      Go to the plugin “Page scroll to id” Settings, inside here you can see an option called “offset”. Next to this, you can insert a number/value (e.g. 150 pixels) which makes the scroller add this much pixels before it lands on the place you want it to stop at. (you can even add in -150 pixels)
      I had to do this as I had the same problem where my navigation menu kept covering up the target or place I wanted it to stop. Hope this helps.

      Reply

Comments pages: 1 2 3

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php