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. alison
    Posted on November 30, 2013 at 20:50 Permalink

    hello! the plugin is great but i can’t get the responsive feature to work. when i resize my browser window or view it from my phone, nothing resizes.
    any help would be so appreciated!

    Reply
  2. mistrmint
    Posted on November 27, 2013 at 14:11 Permalink

    HI,

    Any idea how to stop the sections scrolling under the fixed nav? They need to stop under the fixed nav at the top of the section, but what is happening is that a part of the section disappears behind the fixed nav.

    And, how do you make the menu items as active when a particular section is displayed?

    Thks.

    Reply
    • jen
      Posted on January 14, 2014 at 05:59 Permalink

      you can use z-index to fix this problem

      Reply
  3. Christopher Edwards
    Posted on November 25, 2013 at 03:53 Permalink

    Hi Manos!

    Just wanted to ping and see if I could grab some help. I have previously had this exact plugin working with no issue on another site, however it appears to not work correctly on my current site (http://www.theoverindulgence.com) specifically in the /about/cast/ section.

    It’s setup exactly how it should be and how I have had it working previously, however nothing happens. If I remove the rel=’m_PageScroll2id’ attribute from the Anchor the links work perfectly, however they are a quick drop instead of the smooth scroll transition which I want.

    Any idea as to why this is? Thanks a bunch!

    Reply
    • malihu
      Posted on November 28, 2013 at 16:04 Permalink

      Hello and thanks for the feedback.
      I’m planning to update the plugin as soon as possible (fix those issues and add new features). I’m working like crazy on multiple projects at the moment but I’ll try to publish the new version soon.

      Reply
  4. Ben Byrne
    Posted on November 19, 2013 at 18:36 Permalink

    I haven’t had time to extensively test this, but I just ran into a bug where if I included a body class in the selector, it failed to work. E.g.

    .home a[rel=’m_PageScroll2id’]

    failed to work, but any other ancestor selector would, such as

    header a[rel=’m_PageScroll2id’]

    I hacked around a bit in the -init.js file to make sure my selectors were right with something like this:

    console.log( $(malihuPageScroll2idInitParams.sel).length );

    Which indicated my elements were in the DOM as I expected, and they were. But the scrolling behavior on them didn’t seem to work. Not sure if it’s a problem with line 24 of the main JS file referencing $(‘body’) directly but I wanted to flag this.

    Reply
  5. Tord
    Posted on November 11, 2013 at 05:13 Permalink

    I really like this plugin – very elegant movement in the scrolling.
    However, I have also noticed the same thing as some others here: when linking to an anchor from another/external page, the link does not work. It seems to be something related to the rel value – the anchor works nicely when the xfn-field is empty. Interestingly, it does not matter if the plugin is activated or not – if there is a rel value in a link (say from a menu) in an external page, the link does not work.

    Reply
    • Tord
      Posted on November 12, 2013 at 04:01 Permalink

      Edit: This happens with the link in general, regardless of anchor.

      Reply
    • Jaime
      Posted on November 28, 2013 at 06:43 Permalink

      Fantastic plugin Manos. Thanks for all of your great work!

      PageScroll2Id is a great plugin, but I have the same concern. Links to other pages that include the reference rel=”m_PageScroll2id” don’t work at all. This problem complicates site-wide application of PageScroll with CSS, integration into site-wide menus, pagination of posts, and other site maintenance.

      For example, say you have two identical pages page1.html and page2.html. On page1.html, the link <a href="page1/#someid" rel="m_PageScroll2id"> will work great. However, the link <a href="page2/#someid" rel="m_PageScroll2id"> will not do anything.

      This post describes modifications to jQuery ScrollTo coding to support this functionality:
      http://stackoverflow.com/questions/9652944/jquery-page-scroll-to-different-page

      There’s also a demo of the code working: http://vostrel.cz/so/9652944/page.html

      This addition would make this plugin about perfect.

      Reply
  6. Daniel
    Posted on October 24, 2013 at 13:29 Permalink

    Dear Manos,

    thanks for your great work! I know that you hardly find time for support, but I have a question that a few people here already had and I could not find an answer so far. Please have look at this issue.

    Issue:
    You have a homepage and a top menu. Clicking one of the menu items in the top menu scrolls you down smoothly to an id within that same page (the link for example looks like this http://www.example.com#section1).

    But when you go to another page (e.g. http://www.example.com/another-page) and then click the top menu item linking to http://www.example.com#section1, you are not redirected to the homepage.

    Could you please have a look at that?

    Thank you in advance!

    Daniel

    Reply
  7. Jos
    Posted on September 23, 2013 at 13:06 Permalink

    Is it possible to use [m_PageScroll2id] in a link?
    I tried: http://website/#id?rel=“m_PageScroll2id” This did not work. Is it possible to do something like this?
    I would highly appreciate any help.

    Reply
  8. Buzut
    Posted on September 8, 2013 at 19:56 Permalink

    Hi !

    Your plugin is cool, but for simple needs, plain jQuery does the work very nicely !

    There’s even several ways to do it : http://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery

    Reply
  9. Manti
    Posted on August 24, 2013 at 22:00 Permalink

    Hey,

    First of all thank you for the plugin.
    I have on question, how can I get the scroll2ID to scroll to the location in the URL after a resize?

    thnx,

    Reply
  10. Michelle
    Posted on August 17, 2013 at 14:52 Permalink

    Hey.

    I’m loving your plugin!

    I just need help with something.. I want to have an item in my menubar that links to another page in the site. When I’m on this other page I can’t get back to my single page when I click on any of the other menu items, because the link doesn’t work. Although, when removed the “m_PageScroll2id” link rel AND included the http url (in front of the #section_something) in all the menu items it works (the scroll animation of course only works with the “back to top” buttons now..)..

    Is there any way I can get the menu items links to work from other pages in the site?

    Reply
  11. nirav
    Posted on July 22, 2013 at 07:05 Permalink

    Hello
    I am having issue with this scrollbar, I use this code, I can see scrollbar, but when I scroll , all the page content stick at position and nothing move except scroll itself

    Reply
  12. Michael Dennis
    Posted on July 1, 2013 at 00:56 Permalink

    Hello. I tried your WP plugins and it works good except that when i click on a link in the navigation i don’t want for to http://www.page.com/#link to appear in the browser adress. Is there any way that i could remove that from the adress bar ?

    Reply
  13. Ryan
    Posted on June 24, 2013 at 15:46 Permalink

    Very cool WP plugin, but IT’S NOT WORKING FOR ME.
    I installed, and implemented as instructed but to no success. I am on the latest WP and using a 2011 theme. When I take out the (rel=”m_PageScroll2id”) inside the link, it works just as an anchor fine, when I disable the plugin it also works as a standard anchor. But when I set if all up, the link does nothing, no animation, no scrolling, just dead. Any ideas? Do I need to install something more than your plugin?
    Code:
    <a href="#b" rel="m_PageScroll2id">TEST again!</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a name="b"></a>YOUR THERE!

    Reply
    • malihu
      Posted on June 25, 2013 at 08:35 Permalink

      You need an id attribute (not name) in your target element:
      <a id="b"></a>YOUR THERE!

      Reply
      • Ryan
        Posted on June 25, 2013 at 14:37 Permalink

        Yes!! that worked.. I was using Tiny MCE to put in the anchor and it added “name=”b”.

        Reply
  14. Yannis
    Posted on June 22, 2013 at 21:39 Permalink

    hiya,
    Great plugin. Just one question. I can’t figure out how to integrate it in joomla. I had no trouble with your custom scrollbars, but this refuses to work. demo work on server, but as soon as I set it in joomla (exactly same structure btw), it does nothing. Any help would be appreciated.

    Reply
  15. len
    Posted on June 5, 2013 at 03:21 Permalink

    Hi,

    How can i make this plugin work when I’m in a subpage. When I click on the menu created, if I’m in the homepage it’s working. But when I’m in a subpage, and i click on the menu it’s not redirecting me to the homepage which holds the “target” section.

    Thank you very much!

    Reply
    • Adrien
      Posted on October 16, 2013 at 19:23 Permalink

      I have the same problem. Did you ever figure this out? It’s killing me!

      Reply
  16. mavi veloso
    Posted on June 2, 2013 at 01:27 Permalink

    hei malihu
    first , congrats for your nice plugin

    i’m building a page using it and i wanted to use and for including another page into this one i’m building
    and it seems when i use the iframe it crashes the ease scroll effect.
    know why this happens?

    thanks in advance

    hugs
    mavi

    exemple of the

    Reply
    • mavi veloso
      Posted on June 2, 2013 at 01:29 Permalink

      <div id="my-tumblr" class="iframe resizable object"> <iframe name="my-tumblr" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation" style="background-color: transparent; height: 100%; width: 1200px;" src="http://my.tumblr.com/" scrolling="auto"></iframe> </div>

      Reply
  17. Piotr
    Posted on May 24, 2013 at 17:35 Permalink

    Hey, I have a little question.

    Can this script scroll “almost” to the top ?
    I mean can it stop scrolling 200px before div reach the top ?

    Image explanation:

    Greetings from Poland 🙂

    Reply
    • malihu
      Posted on May 27, 2013 at 00:40 Permalink

      You can try adding a top padding of 200 pixels to the div itself or to a parent wrapper.

      Reply
    • alex
      Posted on June 17, 2013 at 07:38 Permalink

      If you have a fixed top bar and dont want to set some offset value just add a negative value to the end of line 28 of the .js file

      var scrollToPos=$(“#”+scrollTarget[1]).offset().top-75

      and it should work like so http://goo.gl/Pt99i

      all the best!

      Reply
  18. Patricio Lorenzi
    Posted on May 9, 2013 at 15:04 Permalink

    Hi Malihu.
    Great job!
    I’ve posted a message in wordpress support forum. I’d really appreciate it if you could help me set up the plugin.
    Thanks in advance =)

    Reply
  19. Mark H
    Posted on April 30, 2013 at 15:53 Permalink

    Hello this is a greta plugin thanks.
    Just have a couple issues that are probably a simple fix:

    I have installed this on a wordpress site and placed a link on the home page using this plugin to navigate to another page position, for some reason it doesn’t like the rel=”m_PageScroll2id” piece?

    Also the plugin works when the link is on the same page, however it only scrolls showing the element in the centre of the window rather than scrolling to the top?

    Kind regards
    Mark

    Reply
  20. slider2nl
    Posted on April 30, 2013 at 03:25 Permalink

    i was wondering if it is possible to zoom the content in and out / fly in or out from center instead of horizontal or vertical scrolling..

    Reply
  21. SpiG
    Posted on April 19, 2013 at 15:49 Permalink

    Can some one explain with an example on how and where to put this:

    “To start using the plugin in your theme, simply add rel=”m_PageScroll2id” to any anchor element in your markup and give it an href value of the id you wanna scroll to within the page (e.g. href=”#targetID”), assuming of course that an element with such id does exist in your document.”?

    Thank you.

    Reply
    • malihu
      Posted on April 19, 2013 at 17:18 Permalink

      Somewhere in your html (e.g. in your navigation menu, a plain link etc.):
      <a href="#target" rel="m_PageScroll2id">Scroll to #target</a>

      Further down in your html:
      <div id="target"> #target content... </div>

      Clicking on the link above will animate the page to the #target div.

      On the top of this page there are many examples and online demos so you can study their source.

      In WordPress plugin’s settings you can change the default selector or add your own.

      Reply
      • Jor
        Posted on May 16, 2013 at 21:17 Permalink

        You did all this fabulous work, yet the directions are horrible. Most people want to use this with wordpress menus items that navigate vertically to a place on the page.

        Your examples don’t work. Why can’t you make your directions bullet proof so non developers can understand them?

        Very frustrating and it makes more work for you in the end.

        Reply
        • malihu
          Posted on May 17, 2013 at 06:32 Permalink

          Hello,

          I’m really struggling to find time to write few more guides regarding the WordPress plugin. I’ll try to update wp documentation as soon as possible.

          Thanks for the feedback

          Reply
  22. mihai
    Posted on March 22, 2013 at 03:30 Permalink

    Hi There,

    First of all i want to thank you for this nice plugin.
    I have one single problem and i can’t find a way to fix it. Basically i want to make the menu responsive and i’m using JS. The effect dissapear on the drop down menu when is for mobile.

    I’m using this code for making my menu when the web is browsed by some small devices.

    // DOM ready
    $(function() {

    // Create the dropdown base
    $(“”).appendTo(“nav”);

    // Create default option “Go to…”
    $(“”, {
    “selected”: “selected”,
    “value” : “”,
    “text” : “Go to…”
    }).appendTo(“nav select”);

    // Populate dropdown with menu items
    $(“nav a”).each(function() {
    var el = $(this);
    $(“”, {
    “value” : el.attr(“href”),
    “text” : el.text(),
    “rel” : “rel” // That’s the place where i’ve add the rel from the plugin.
    }).appendTo(“nav select”);
    });

    $(“nav select”).change(function() {
    window.location = $(this).find(“option:selected”).val();
    });

    });

    In the source code i could see the “rel” with the correct id, but because now i use “value” insteat of “a” i think the plugin is not active anymore. I’ve tried in few ways but still not able to enable the nice effect. Is just scroll directly to where i click .

    Thanks a lot!

    Reply
  23. Terence
    Posted on March 19, 2013 at 16:10 Permalink

    Hi malihu,

    I am not a developer and I am struggling more than I normally do with this one. Obviously there’s something I am missing here.

    Am I able to use this with a native WordPress menu link to scroll to a location further down the page, or another page entirely, and if so “exactly” how please…?

    Can you give me an idiots guide and walk-through because that’s how I feel right now. Been struggling for hours!

    Terence.

    Reply
    • Jordan
      Posted on May 17, 2013 at 05:33 Permalink

      I feel your pain Terence… I too wasted a lot of hours trying to figure out what this guy, on this website below clarified in 1 minute with an excellent video tutorial.

      http://www.pootlepress.co.uk/2013/02/video-tutorial-a-beginners-guide-on-how-to-create-a-single-page-wordpress-website/#comment-4303

      Not sure how the developer of this plugin could just gloss over whtat’s in that video.

      Reply
      • Jason
        Posted on June 16, 2013 at 08:39 Permalink

        Jordan, I still don’t think that addresses Terence’s issue of linking to another page. The example at pootlepress only shows how to link to an anchor within a page (e.g. #anchor) , instead of a separate page (e.g. /page#anchor).

        Reply
      • Terence
        Posted on August 15, 2013 at 17:23 Permalink

        @Jordan ~ mate, you’re a star! Shame your comment came too late for the last time I tried to use this plugin. I have only just decided to give it another go, on a new website I am working on, returned here and seen it. What I wouldn’t have given for that little bit of information and to watch the PootlePress video back then. The secret is in the link relationship XFN function. Thanks you so much.

        Reply
  24. Ling
    Posted on March 6, 2013 at 17:45 Permalink

    Thanks a lot. Your cool stuff helps me a lot!!!
    the first demo is with the fix background, or if not what i can change to make the strolling site with fix background?

    Reply
  25. Floren
    Posted on March 1, 2013 at 01:24 Permalink

    Hello, I’m writing because I do not know how to make headlines with the h2 tag references are plugin. Should I add another menu in the template in the sidebar?
    Thanks

    Reply
    • Floren
      Posted on March 1, 2013 at 02:52 Permalink

      Is in worpress theme.

      Reply
  26. hanan
    Posted on February 27, 2013 at 00:38 Permalink

    Hi
    great plugin. I have one problem, I have a kind of a conflict with the folowing scripts.
    When I add you pluging, the jkit stop functioning.
    Thanks

    $(document).ready(function(){
    $(‘body’).jKit();
    });

    Reply
  27. Tom
    Posted on February 6, 2013 at 22:10 Permalink

    Hi. Great script. It was working well with jquery 1.8.2 and jquery-ui 1.9.0. I just updated to the latest version (jquery 1.9.0 and jquery-ui 1.10.0), and also got your latest js from Github.

    There’s an error in line 24, and it’s because .live() is deprecated. I changed that line to
    return this[“on”]….. and it works now.

    Reply
    • malihu
      Posted on February 9, 2013 at 01:17 Permalink

      Hey, thanks a lot for the feedback 🙂

      I’ll update the script soon to a new version. Simply changing “live” with “on” does work but only for elements that already exist in the page. To include existing and future (dynamic) elements, you can re-edit line 24:
      return $("body")["on"]("click",this.selector,function(e){
      the above will work with jQuery 1.7 and later. In order to support older jQuery versions I’ll most likely use .delegate() (instead of .on()), which does exactly the same thing (and included since version 1.4.something):
      return $("body")["delegate"](this.selector,"click",function(e){

      Reply
  28. matt
    Posted on February 6, 2013 at 04:34 Permalink

    I have a fixed header that I want all links to be 205px from top.I can’t use padding for the div to link to because I have drop down menus with multiple links per page that look funny 205pc apart.
    I wonder if there is somewhere in the js/jquery.malihu.PageScroll2id.js file to insert an offset of 205pc from the top of page?
    I haven’t figured this one out yet.

    Best,
    Matt

    Reply
  29. Ines
    Posted on January 3, 2013 at 12:43 Permalink

    Hi!
    Thanks for your work, it’s great!

    I’m trying to use your plugin in my Wp, it works perfeclty and it’s easy to use.

    Anyway I have an issue and I’m not sure if it can be solved:

    I have a home and a top menu. Clicking in one of the in top menu, it scrolls down to an id.
    Until here everything is ok.
    But if you click in one of the elements inside this id, a new page is loaded. In this new page top menu is still there, of course, but that id was in home, not in this new page. So it doesn’t work any more.

    Is there anyway to link this scroll to an url + an id? I mean somethig like
    name

    (I’m sorry if my explanations are bad, my english is not so good 🙁 )

    Just if you have a moment I leave here a link, my be it’s easier than my explanations if you see:
    http://www.elbotonrojo.es/elpuntodelai/

    “cosasssss” in top menu scrolls to “cosas” in home.php. Then when you click in the picture a new page is loaded.

    Thanks a lot for reading this and congratulations for your work!
    🙂

    Reply
    • malihu
      Posted on January 3, 2013 at 15:52 Permalink

      Hello and thanks for your comments,
      Did you managed to fixed that? When the new image has loaded, when I click again on “cosasssss” it does scroll to “cosas”.

      Reply
      • Ines
        Posted on January 4, 2013 at 10:52 Permalink

        Hi!
        Yeah, sorry, I didn’t explain well 🙁
        When you clik on the picture a new div is loaded in the same page. So scroll works. If you click on “read more” in this new div, a new page is loaded. Then is when “cosassss” doesn’t work.

        Question is if you can ask the “a href” to load a new page and then, when loaded, to scroll to an id.

        I’ve been reading what you wrote about deep linking. May be solution is here? I’m not sure if I understood well what it is. Anyway I’ve tried to use “address” in my site and it doesn’t work (I don’t know javascript or jquery so well to create specific functions which work in my Wp).
        Thanks and saludos desde España 🙂

        Reply
        • Ines
          Posted on January 4, 2013 at 10:56 Permalink

          I meant “more info” button, nor “read more”

          Reply
  30. chris riesner
    Posted on November 19, 2012 at 06:32 Permalink

    Great Plugin!
    Has anyone put together a code that uses the html versions current state (as you scroll past) function and applied it to the wordpress plugin?
    If anyone cares to share, i’d really love to have this function on my wordpress site!

    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