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. 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?

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

      Send me an e-mail 🙂

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

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

    Reply
  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]
    $(“a[rel=’m_PageScroll2id’]”).mPageScroll2id().address();

    Do you know what this might be and why?

    Here is my code:

    $(document).ready(function(){
    $(window).load(function(){
    /*$(“#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 */
    $(“a[rel=’m_PageScroll2id’]”).mPageScroll2id().address();
    /* call “externalChange” method of jquery address plugin to scroll page on browser back/forward */
    $.address.externalChange(function(event){
    if(event.value){
    var eVal=event.value.replace(“/”,””);
    if(eVal===””){
    eVal=”top”;
    }
    /* call “history” method of mPageScroll2id and pass jquery address hash value */
    $().mPageScroll2id(“history”,{
    scrollTo:eVal
    });
    }
    });
    });
    });

    $(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’});

    });

    Reply
  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

    Reply
    • 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.

      Reply
      • 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 screenr.com or something 🙂

        http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/

        Reply
  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.

    Reply
  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..

    Reply
  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)?

    Thanks!

    Reply
  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?

    Thanks!

    Reply
    • 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.

      Reply
  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,

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

      Hello,

      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:
      http://manos.malihu.gr/tuts/animate-page-to-id/css-template/

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

      Hello!
      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.

      http://14islands.tumblr.com/post/30313367126/solved-position-fixed-scrollto-bug-ios

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

      Reply
      • 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.

        Reply
        • 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!

          Reply
  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?

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

      Hello,

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

      Reply
  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:

    (function($){
    $(window).load(function(){
    $(“a[rel=’m_PageScroll2id’]”).mPageScroll2id(
    {
    scrollSpeed:1700,
    autoScrollSpeed:true,
    scrollEasing:”easeInOutExpo”,
    scrollingEasing:”easeInOutCirc”,
    callback:function(){},
    pageEndSmoothScroll:true,
    layout:”auto”
    });
    });
    })(jQuery);

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

    Thanks very much,
    Derek

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

      Hello,

      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).

      Reply
      • 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.

        Derek

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

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

    Theme source: http://html5reset.org/#wordpress (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?

    Thanks,
    Boti

    Reply
    • 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.

      Reply
      • 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

        Reply
  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: http://www.pedrote.com

    Thanks !!!

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

      Give it position:fixed; in the css.

      Reply
      • 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

        Reply
  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!

    Reply
  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?

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

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

      Reply
  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,

    Stefano

    take a look here

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

      Hello!

      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

      Reply
  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

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

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

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

    teset

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

    sadasdasd

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

    yooooo!

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

    fff!!!

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

    ttteeesttt

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

    testing55

    Reply
  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 😉

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

      Hello,
      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).

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

    Hi,

    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

    Reply
  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.
    Gracias!!

    Reply
  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() {
    $(‘ul.link a’).bind(‘click’,function(event){
    var $anchor = $(this);
    $(‘html, body’).stop().animate({
    scrollTop: $($anchor.attr(‘href’)).offset().top
    }, 3000);
    event.preventDefault();
    });
    });

    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.

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

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

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

      Obrigado!
      Google Translate helps 🙂

      Reply
  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…

    Reply
    • 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:
      http://manos.malihu.gr/tuts/horizontal_single-page_template/page_srolling.html

      Reply
      • 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..

        greetings,
        Mark

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

    Nice work!

    Reply

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>

css.php