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.

 


109 Comments

Post a comment
  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. Ryan
    Posted on November 3, 2012 at 22:39 Permalink

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

    Reply
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. kloklo
    Posted on June 1, 2012 at 20:53 Permalink

    teset

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

    sadasdasd

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

    yooooo!

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

    fff!!!

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

    ttteeesttt

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

    testing55

    Reply
  56. 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
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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
  62. Jorge
    Posted on October 21, 2010 at 05:34 Permalink

    Nice work!

    Reply


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>

css.php