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>
<div id="content">
  <div id="section-1">
    Section 1 content
  <div id="section-2">
    Section 2 content
  <div id="section-3">
    Section 3 content
  <div id="section-4">
    Section 4 content

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=""></script>
<script src="jquery.malihu.PageScroll2id.min.js"></script>

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

            $("#navigation a").mPageScroll2id();

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({

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.



Post a comment

Comments pages: 1 2 3

  1. Les
    Posted on November 7, 2012 at 00:18 Permalink

    Setting padding on the elements being scrolled to is resulting in inconsistent placement of the nav menu even with position: fixed. It scrolls to different place from above than from below, and the same padding on different elements produces different results. This is using the wordpress plugin. I can’t provide link because in maintenance mode. Do you offer support via pm?

    • malihu
      Posted on November 7, 2012 at 18:10 Permalink

      Send me an e-mail 🙂

  2. Ryan
    Posted on November 3, 2012 at 22:39 Permalink

    Your plugins are very sleek! Very cool demos. Its inspiring!

  3. John
    Posted on October 25, 2012 at 18:24 Permalink

    This was working fine, but when I added a jQuery Tooltip to the page, which works great…I now get an error of :

    TypeError: $(“a[rel=’m_PageScroll2id’]”).mPageScroll2id is not a function
    [Break On This Error]

    Do you know what this might be and why?

    Here is my code:

    /*$(“#light_blue_phone”).tooltip({tipClass: ‘tooltip1’, effect: ‘slide’});
    $(“#tan_phone”).tooltip({tipClass: ‘tooltip2’, effect: ‘slide’});
    $(“#dark_blue_phone”).tooltip({tipClass: ‘tooltip3’, effect: ‘slide’});*/

    /* call both mPageScroll2id and address functions on our selector */
    /* call “externalChange” method of jquery address plugin to scroll page on browser back/forward */
    var eVal=event.value.replace(“/”,””);
    /* call “history” method of mPageScroll2id and pass jquery address hash value */

    $(document).ready(function() {

    $(“#light_blue_phone”).tooltip({tipClass: ‘tooltip1’, effect: ‘slide’});
    $(“#tan_phone”).tooltip({tipClass: ‘tooltip2’, effect: ‘slide’});
    $(“#dark_blue_phone”).tooltip({tipClass: ‘tooltip3’, effect: ‘slide’});


  4. Scott
    Posted on October 20, 2012 at 18:35 Permalink

    Very cool, plugin! I could not get this to work with easing effect in WordPress until I found this plugin.

    Quick questions – It scrolls just a little past where I want it to how and where can I add a negative offset and what would be the code to do so?

    Also, How and where would I add code so that my nav menu is highlighted on the section where the screen is at..

    Thanks Much.. Scott

    • malihu
      Posted on October 21, 2012 at 07:59 Permalink

      Hello and thanks for your comments.

      If it seems to scroll past where you visually want it, you can add a top padding to the target element or insert another tag (e.g. <a id="your-id"></a>) above the element you’re scrolling to and act as your anchor point.

      The plugin scrolls the page to the exact position of the target element (its position includes its padding, but not its margin). If you check the demo, I’ve also added a padding to the sections I’m scrolling to in order to give them the offset of the top menu.

      To highlight a navigation menu item while scrolling (via the plugin or manually), check the code in custom.js of the CSS template.

      • Scott
        Posted on October 21, 2012 at 23:20 Permalink

        Thank Malihu, I think it was just the wp admin bar that was hiding my page title that was making me think it was scrolling past 🙂

        Great Plugin

        Thanks Scott

        This was my next go but could not get it working.. may have been a conflict or something but really cool men… If anyone gets this working on wordpress please share a short screen cast on or something 🙂

  5. Lindsey Cook
    Posted on October 20, 2012 at 02:39 Permalink

    Hello! I started using your plug in today on one of my pages. When I implemented the plug-in and started using it, the scrolling worked great, but it made my sidebar disappear! I have a sidebar on the site that includes navigation. Any ideas on how to make it come back? It disappeared for the page I am using your plug-in on only.

  6. slider2nl
    Posted on September 27, 2012 at 04:58 Permalink

    I really need some help..
    What i am trying is to have a vertical scrolling (top bottom) with 10 sections and 7 of them i want to use the horizontal scrolling in diffrent sections/categories but somehow combining the 2 and changing some values it doesnt work..

  7. Olan
    Posted on September 20, 2012 at 17:20 Permalink

    Is it possible to hide the various target divs, an only make them visible once they have been activated via the function (then hide everything else)?


  8. Gino Whitaker
    Posted on September 2, 2012 at 00:32 Permalink

    Will this plugin work with any WordPress template, or does it have to be a “one page” type of template? Do you have a starter template that you recommend that will work well with this plugin?


    • malihu
      Posted on September 7, 2012 at 16:51 Permalink

      It works with any template. The most obvious implementation would be on a single-page template of course, but you can also use it on any type of template for back-to-top links, jump to comments section, etc.

  9. Benjamin
    Posted on August 24, 2012 at 10:48 Permalink

    HI !!! this is a nice plugin. Unfortunately we have a problem with touch scrolling on the iPad. Maybe you have a solution for the following problem:

    On iPad the first touch on the navigation works like charm, but touching the next link won´t work. Now if I scroll down or up for a pixel or more the scrolling effect works again.

    Doe you have an idea?

    Thanks in advance,

    • malihu
      Posted on August 24, 2012 at 14:20 Permalink


      Unfortunately iPad’s implementation of position:fixed CSS rule is a bit buggy. Seems that it requires a touch-swipe to re-position a “fixed” element within the viewport and since we scroll the page via javascript (without swipe), the bug happens.

      I don’t know when they’ll implement a fix for this, so currently the only thing you can do is either remove the fixed navigation and have a non-fixed menu at the top, or scroll the menu via javascript like the one I’ve made on the CSS template:

    • Dave
      Posted on September 7, 2012 at 01:20 Permalink

      Thank you very much indeed malihu for a very helpful plugin! Having the exact same issues on my ipad and iphone I’m thankful for getting an explanation to it as it was driving me mad. After a quick google search I found this solution which I presume might work.

      I’m however completely lost when it comes to javascript so I have no idea how incorporate it.

      • malihu
        Posted on September 7, 2012 at 16:45 Permalink

        Thanks! I’ll check it and see if I can implement it in the plugin.

        • Dave
          Posted on September 9, 2012 at 01:14 Permalink

          Oh, that would be fantastic! Apple are supposedly fixing this for IOS 6 though one can never be too certain. Thank you again for your help!

  10. Anthony Daniel II
    Posted on August 8, 2012 at 20:55 Permalink

    Hey great work. Everything works fine but I am building a fluid site with a fixed header and when I click an anchor it scrolls but lands at the top position of my fixed header. How do make it land right where the header element ends?

    • malihu
      Posted on August 8, 2012 at 22:54 Permalink


      This is normal. Just give the target element (the element you’re scrolling to) a top padding equivalent to your fixed header height.

  11. Derek
    Posted on July 25, 2012 at 17:49 Permalink

    Hi there. This script is really great, and works perfectly on my desktop browsers, but I’m having some troubles porting it over to work in Safari on the iPhone. I’ve been toying with the code, and have been able to make the transitions work on my mobile, and in the development simulator for iPhone/iPad. I feel as if there is something very simple that I am missing. Any suggestions would be welcome. My function code to call is as follows:


    The symptoms seem the same as @Botond, but only in the mobile browser is it jumping without a smooth animation.

    Thanks very much,

    • malihu
      Posted on July 25, 2012 at 19:36 Permalink


      The script automatically removes animations when layout is “auto” (page scrolls both horizontally and vertically) and touch device is detected.

      I’ve made some tests on iOS 5.1 (on an ipad) and seems that touch devices do not handle animating root elements on both axis. This is a touch device OS related issue so there’s no fix or workaround. This applies only to “auto” layouts when viewed from such devices.

      Removing the animations is essential in order for the plugin to work well and be accessible from anywhere (desktop or mobile).

      • Derek
        Posted on July 26, 2012 at 03:50 Permalink

        Ahh. I see. Thank you for the quick response. This explains accurately why some of your examples work in the emulator, and some don’t. I had been trying to ascertain some coding difference there, but had no idea that it was a limitation of the software in that particular hardware set.


  12. Botond
    Posted on July 14, 2012 at 17:38 Permalink

    WordPress plugin not working, when I user an HTML5 Reset theme.

    Theme source: (Unfortunately) I can’t give you a direct link, the site is not public yet.

    I downloaded the plugin and followed the instruction regarding the implementation. When I click on the anchor it jumps to the right place, but without smooth scrolling. I think that the jquery is not loaded…

    Do you have any ideas how could I solve this problem?


    • malihu
      Posted on July 15, 2012 at 05:16 Permalink

      From what you say either jquery, jquery ui or jquery.malihu.PageScroll2id.js is not loaded. Check if paths are correct for those files and try opening your page with Firefox and inspect it with Firebug to see if any errors appear on the console.

      • mavi veloso
        Posted on May 21, 2013 at 09:15 Permalink

        hi malihu and how do we make smooth work , then? should i install jquery to wordpress? how to do it? not very expert on it sorry to be asking... hugs

  13. gian
    Posted on June 28, 2012 at 18:02 Permalink

    Hello, this is a great tool, i’m wondering how can i freeze the header, something like this:

    Thanks !!!

    • malihu
      Posted on June 28, 2012 at 18:08 Permalink

      Give it position:fixed; in the css.

      • Gian
        Posted on June 28, 2012 at 18:46 Permalink

        Thanks !!! But after possition:fixed, the sections names shows in the same place as the logo

  14. Christopher
    Posted on June 20, 2012 at 21:00 Permalink

    Hey, how could I configure this so rather than scrolling so the specified element is at the top of the page, it scrolls until it’s in the center. Thanks for the great work!

  15. Peter
    Posted on June 17, 2012 at 02:57 Permalink

    Question: Will this work on a div within a page? In other words, the entire page will not move, just a specific div on the page will scroll?

    • malihu
      Posted on June 22, 2012 at 07:07 Permalink

      Nope. The plugin scrolls only the root element (html or body).

  16. Stefano
    Posted on June 5, 2012 at 20:23 Permalink

    Hi man,

    thank you for your greit plugin.
    I’ve already tried other scripts, but I think your is the best for my design.

    I’ve a problem.
    my page simulates a chess board.

    how can I make the menu follows the horizontal scrolling?
    If you try my demo, you’ll notice that the memu is working only in the first row.

    and, another “little” question.
    How can I make your script work with li element instead of link?
    i want to integrate fancybox with the links.

    Thank you man,
    sorry for my english,


    take a look here

    • malihu
      Posted on June 7, 2012 at 01:11 Permalink


      The css-template menu is made for vertical navigation only.
      If you wanna make the menu follow both x and y axis, edit custom.js and replace NavigationMenu function the with the following one:

      $.fn.NavigationMenu=function(speed,easing){ var $this=$(this); var topPosition=$this.position().top; var updatePosition; var leftPosition=$this.position().left; var updatePositionX; $(window).scroll(function(){ updatePosition=$(this).scrollTop()+topPosition; updatePositionX=$(this).scrollLeft()+leftPosition; $this.stop(true,false).animate({top:updatePosition,left:updatePositionX},speed,easing); $().NavigationMenuHighlight(); }); }

      You also need to give a fixed width to #navigation-menu in css.

      On the second question, the plugin works by getting the href hash (#) value of elements, so I can’t really suggest giving href attribute to list elements.

      Hope this helps
      Thank you for your comments

  17. J
    Posted on June 5, 2012 at 00:11 Permalink

    Hey man is the single-css file directly downloadable I’m having problems getting an image to expand to full browser width

    • malihu
      Posted on June 5, 2012 at 15:11 Permalink

      The download archive contains all css template files inside css-template folder.

  18. kloklo
    Posted on June 1, 2012 at 20:53 Permalink


  19. nnnaaaa
    Posted on June 1, 2012 at 20:51 Permalink


  20. tester6
    Posted on June 1, 2012 at 20:48 Permalink


  21. tester6
    Posted on June 1, 2012 at 20:31 Permalink


  22. tester6
    Posted on June 1, 2012 at 18:56 Permalink


  23. malihu
    Posted on June 1, 2012 at 18:51 Permalink


  24. Julian
    Posted on March 21, 2012 at 15:13 Permalink

    Just started delving into this library, thanks for the help.. whats cross browser compatitibility like? I know webkit doesnt support.. thanks in advance! will link you when ive finished building 😉

    • malihu
      Posted on June 5, 2012 at 15:08 Permalink

      The updated jquery and wordpress plugins, as well as the css template work on every desktop browser and touch device (I’ve tested scripts successfully on iOS 5.1 on iPad).

  25. ew
    Posted on March 13, 2012 at 11:51 Permalink


    Im struggling to get this to work for my situation…

    I’ve got a jqueryui dialog, on which is a scrollable div. Im trying to get the div to scroll to a certain section using your plugin

  26. Frederico
    Posted on January 31, 2012 at 09:32 Permalink

    I am impressed about the reduced code to your above horizontal scrolling example with fullscreen images and next/prev. navigation.

    Do you also have the same with an example of vertical scrolling?
    I would appreciate it to see it in action.

  27. Rish
    Posted on November 10, 2011 at 21:09 Permalink

    I am new to all this just started learning css/js/jquery yesterday. but I was trying the same thing without “easeInOutExpo” and it still works fine, I dint actually try working it with the easeInOutExpo thing cause I think for some reason it is not able to find the function, anyways this is what exactly what I used:

    $(function() {
    $(‘ a’).bind(‘click’,function(event){
    var $anchor = $(this);
    $(‘html, body’).stop().animate({
    scrollTop: $($anchor.attr(‘href’)).offset().top
    }, 3000);

    It is exactly what you did but this way I don’t have to go every time and call the method everywhere a link is defined, it automatically activates when a link is clicked. I am not sure what adv/disadv this has so please let me know if any and if you can, can you brief me on what difference would it make if I used easeInOutExpo.
    I have included the file but I dont know why it cant read the method, any suggestion there too would be great help.

  28. Antonio
    Posted on November 7, 2011 at 21:07 Permalink

    Muito bom, parabéns pelo tutorial!!!!

    • malihu
      Posted on November 9, 2011 at 14:07 Permalink

      Google Translate helps 🙂

  29. Asch
    Posted on April 17, 2011 at 19:20 Permalink

    Pretty solid system, thanks!
    Is it also possible to use prev & next button?
    For instance if you are at C3, you could go back to C2 or next to C4…

    • malihu
      Posted on April 17, 2011 at 23:31 Permalink

      I haven’t implement an automatic way of scrolling to next/previous id yet. I might give it a go in the future. For now, you can always do it manually 😉

      I’ve done some testing with horizontal scrolling with next/previous scrolling. It has some extra stuff like fullscreen background images etc., but to get an idea:

      • Manti
        Posted on July 20, 2013 at 13:43 Permalink

        Thnx for the great work you’ve done for me, it gives great examples.

        Were can I find the source of your example for: “horizontal_single-page_template/page_srolling.html”

        Im trying to create a website that has horizontal navigation.
        Every page that I navigate to needs full width (so no other page, left or right, is shown at the same time).
        The page content should be around 900 width and floating in the middle.

        The last bits wont be the problem, but the navigation part is.
        Hope that the code from the link will help me..


  30. Jorge
    Posted on October 21, 2010 at 05:34 Permalink

    Nice work!


Comments pages: 1 2 3

Post a comment

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>