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

Horizontal page animation with jQuery

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

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>

In order to create a horizontal layout for the markup above, you’ll need few basic css rules

body{
  width: 400%;
}
#navigation, #content{
  width: 100%;
}
#content > div{
  width: 25%; 
  float: left;
}

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 and set layout option parameter to "horizontal"

<script>
    (function($){
        $(window).load(function(){
            $("#navigation a").mPageScroll2id({
                layout:"horizontal"
            });
        });
    })(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.

 


54 Comments

Post a comment

Comments pages: 1 2

  1. AIR4Android
    Posted on October 13, 2012 at 02:28 Permalink

    Hi,

    I’m just trying to strech the page completely to 100% width. I just don’t want to see pag2 when i’m seeing page 1. How do I do it?

    Thanks in Advance.

    Reply
  2. sufi
    Posted on September 28, 2012 at 14:39 Permalink

    Ultimate

    Thanks for the great plugin,

    This has been really helpful!

    Reply
  3. Sambodhi Prem
    Posted on September 22, 2012 at 08:46 Permalink

    Hi Malihu,

    I’m trying to make this horizontal page animation responsive, to work with iPhone etc.

    Here’s the page I’m working on:
    http://bit.ly/Pu2Mbd

    Can you help?

    best regards,

    Sambodhi Prem

    Reply
  4. Hiba
    Posted on September 1, 2012 at 13:22 Permalink

    Hi,
    thanks for the great plugin,
    this is the second time I use it but I just want it to start automatically, and there are some divs inside that I do not want to scroll or animate with it..any ideas? please?

    Reply
  5. Fabricio
    Posted on August 23, 2012 at 22:36 Permalink

    hey @Luis Santamarina thx man!!!!!!!!

    your solution are great man!! thank you

    Reply
  6. Saf
    Posted on August 18, 2012 at 13:59 Permalink

    Awesome script, thanks.

    I have set this up for my website and have left the overflow-y to scroll as I have lots of vertical content. Is there a way of scrolling back to top vertically as well as horizontally in one action?

    http://www.safwanonline.co.uk/new/

    Here is my current set up and as you can see if you are scrolled down on the web design area then click another menu option, it scrolls horizontally but the content in that area is at the top.

    I have tried playing around with the animate() values with “top” as well as left but my jquery knowledge is limited.

    Would really appreciate any help.

    Thanks

    Reply
    • malihu
      Posted on August 18, 2012 at 15:28 Permalink

      Hello,

      I’ve made a jQuery plugin that does exactly what you need. If you have time to implement it, I’d suggest using it as it provides more options and features (scrolling both axis, deep linking incorporation etc.). It’s easy to implement and works well on touch devices.
      You can find it here:
      http://manos.malihu.gr/animate-page-to-id-with-jquery

      Reply
      • Saf
        Posted on August 20, 2012 at 16:38 Permalink

        Thanks mate, will take a look at it.

        Reply
  7. Delia
    Posted on July 19, 2012 at 01:25 Permalink

    Why doesn’t it work when I try to use it with jquery or callback?
    I actually would like to use this slide behaviour with the change of hash, but it starts to misbehave even before trying that
    Here’s a Fiddle to look at
    http://jsfiddle.net/besign/jr7JR/2/

    I’ve changed Links #c1 and #c4 to what I want and you can see inmediately that after those are triggered, the position starts to miss.

    And if you start with a hash, same happens:
    http://jsfiddle.net/m/ute/#c4

    Any ideas? Great Post with this info btw, I’m dreaming of implementing this, but in the explained way!

    Reply
  8. TWeaver
    Posted on July 1, 2012 at 17:48 Permalink

    This has been really helpful!

    I have a question about background images. I’ve been trying to place a background image, and have had no luck getting it to appear. I’ve tried placing it in the body, in the containers, and no matter where I put it in my CSS file, it’s just not working. I’m 100% I’m linking to the file the right way, and can’t figure out why it’s not working.

    Any tips?

    Reply
  9. Will Knot B. Revealed Snr.
    Posted on June 19, 2012 at 21:47 Permalink

    Great post and great site malihu. 🙂
    Keep up the great work.
    Bookmarked ♥

    Reply
  10. arwen
    Posted on June 1, 2012 at 16:04 Permalink

    Great post!
    I used this for my project for school.
    But I can’t seem to center my divs in the middle of the screen (horizontally). I have a slideshow on C1 and i want it to stay in the middle of the page, no matter the screen size. Is this possible?
    any help would be great!

    Reply
  11. mohammad
    Posted on May 24, 2012 at 10:13 Permalink

    omg
    You have a fantastic post here, really helpful.

    thank you!

    Reply
    • malihu
      Posted on May 24, 2012 at 23:39 Permalink

      Thanks 🙂
      This post will be updated very soon with a proper jquery plugin, wordpress plugin, css template and complete guides.

      Reply
  12. Luis Santamarina
    Posted on May 15, 2012 at 16:15 Permalink

    Hi, i have a problem, its olny working fine to #c6 when i make #7 this go back to #c1 .
    you can check in the demo i made. http://www.mitomante.com.ar/test
    mitomante == c1/cuentos == c2/comics==c3/poemas==c4
    cuentos-mondob == c5/cuentos-compendio==c6/cuentos-cuentosrobots==c7….this go back to c1.

    thank you!

    Reply
    • Luis Santamarina
      Posted on May 15, 2012 at 17:04 Permalink

      this is the solution I found
      the width of the container is 10000px, and the width of every element (# c1,2,3), was 1500px.
      if the sum of them passes 10000px (1500×7), then you can include the width of the container based on the total width of the elements .

      Reply
      • Luiza
        Posted on September 17, 2012 at 00:37 Permalink

        Hi Luis….
        i didn’t understand what you mean. Can you help me out?! im heaving the same problem…

        Reply
        • Hakimo
          Posted on October 31, 2012 at 11:30 Permalink

          Hi Luiza, what Luis meant is that in the css section, change the content of the div “#container”. Default width is 10,000. If you have 7 pages, change the “width” to 12,000. The more pages you add just add another 1500.

          Reply
          • luiza
            Posted on November 8, 2012 at 19:16 Permalink

            Got it ! thanks!

  13. Milend
    Posted on April 23, 2012 at 23:42 Permalink

    Hi malihu,

    great stuff mate…I need to put rollover images instead of text in the menu..Its not working..

    and I want to put twitter feed in c1 and want to put image thumbnail in c5 with jquery scroll.. how do I do it man.

    Looking forward for easy solution.

    Thanks

    Reply
  14. Daniel Griza
    Posted on April 20, 2012 at 23:10 Permalink

    Hello, I’m having problems in the transition of some pages, you can help me?

    cv.griza.com.br

    Specifically 5 >> 6

    Reply
    • malihu
      Posted on April 21, 2012 at 13:41 Permalink

      Hello Daniel,

      There’s a bug in jquery that resets to zero, an animate value greater than 9999 pixels.

      To fix it, please check this post:
      http://manos.malihu.gr/jquery-thumbnail-scroller
      and specifically the section “Scrolling long content” where I provide a quick-simple solution.

      Reply
      • Milend
        Posted on April 23, 2012 at 23:42 Permalink

        Hi malihu,

        great stuff mate…I need to put rollover images instead of text in the menu..Its not working..

        and I want to put twitter feed in c1 and want to put image thumbnail in c5 with jquery scroll.. how do I do it man.

        Looking forward for easy solution.

        Thanks

        Reply
  15. Sam
    Posted on April 18, 2012 at 06:16 Permalink

    Is it possible to set these scrollers to go to different pages within the site instead of just different divs located on the same page? Say if i had index.html and I wanted to link it in a way such as:

    Photography

    It seems that the scrolling doesn’t work anymore. Sorry this is probably a dumb question, im pretty new to all this.

    Thanks,
    Sam

    Reply
  16. Paul
    Posted on April 9, 2012 at 20:18 Permalink

    Ok, forgive me if I’m missing something simple…

    I want to reverse the animation. Have the div swipe to the right instead of the default left. I’ve been trying to days to figure this out. Any help would be appreciated!

    Reply
  17. bruno
    Posted on March 9, 2012 at 18:07 Permalink

    how to adjust de screen on the middle , any ideias?

    Reply
    • Paul
      Posted on April 9, 2012 at 20:20 Permalink

      margin: auto; /* in your css */

      Reply
  18. Mark
    Posted on January 15, 2012 at 17:31 Permalink

    Hi Manos,

    First off thanks much for the AWESOME posts! They’ve been very helpful.
    I’ve a question for you. I’m using the Horizontal page animation with jquery on my new site. I would like to have the background image to “stretch” & “shrink” depending on monitor size. I currently have the image dimensions at 1920×1280.

    The image scales vertically but not horizontally.

    May I please request some assistance with this?

    I could sure use your input. Please reply with the e-mail provided.

    Thanks in advance,
    Mark

    Reply
  19. Fabian
    Posted on December 14, 2011 at 00:45 Permalink

    I have the same problems adding “c7” can you help me

    Reply
  20. andi
    Posted on October 2, 2011 at 07:30 Permalink

    this not work on php

    Reply
  21. Rob
    Posted on June 15, 2011 at 19:11 Permalink

    Hi Malihu, just a quick question on your script. If I have dynamically created pages in a textpattern site, my page contains nine images per page. I would like to animate within the pages using your script. is it easy to achieve as the page numbers increase as I add images to the page(s). (example: http://codecanyon.net/item/tonic-gallery-jquery-xml-portfolio-gallery/full_screen_preview/120710)

    Reply
  22. David
    Posted on May 27, 2011 at 03:10 Permalink

    Thanks for the answer. Amazing site, you are very generous with your talent.

    Reply
  23. David
    Posted on May 26, 2011 at 01:29 Permalink

    hi there, I’m sorry to ask such a basic question but I’m new to this! Could this be used to scroll between html pages?

    Thanks in advance,

    Reply
    • malihu
      Posted on May 26, 2011 at 03:06 Permalink

      Yes, you can create a single-page website with this script (with ajax, load() etc.), although it’s gonna be a bit hard to create such website if you don’t have enough experience in js and css.

      Reply
  24. Manaat
    Posted on April 26, 2011 at 15:35 Permalink

    I have a listbox inside div the height of the listbox depends on the number of elements , this way the scroll bar is shown to div when i click the first or last element of the list box my page scroll bar move how can i stop this behaviour it only appear in safarie 4.0 IE 7 works fine

    I need to place listbox inside div becz in safarie if the listbox is empty it show disabled scroll bars

    Reply
  25. m
    Posted on February 16, 2011 at 04:46 Permalink

    Hey very nice article you got here!!!!!! i have been looking for something like this..

    but anyway malihu.. mind if i ask something? uhm…
    i tried adding another set of page ” c7″ but i cant seem to find a way for it to have its own page when i click the anchor ‘content 7’ it just goes back to content 1 page.. i double checked everything but i don’t think i know whats wrong thats why..

    do you mind replying to my email (this is my first time to comment so if i am gonna receive a mail regarding your reply no need to mail your reply)
    [email protected]

    Thanks alot

    Reply
    • jay
      Posted on April 12, 2011 at 08:06 Permalink

      heya,
      I’ve bee scouring internet trying to find various scrollers, this seems to be the only one I found that does the trick with the CMS i’m using.
      Now the thing is I liked the vertical scroller but didn’t seem to work. I am trying to reference a with a nested .html. this one worked by changing “left” to “top” although I don’t think this is really the best way to do it.
      Now for the sake of my site I need the overflow-y set to auto so as content is arbitrarily added it will force the scroll bar. for some reason as I jump down to my “id” points the page itself disappears or is interpreted as a shorter and shorter page so the scroller dissappears, then if I click my button to load different content into that the information remains the same so the new page loads at whatever y-axis the scroller left it at.
      Is there anyway to either properly adopt your vertical scroller with the technique you used here, or somehow ‘clear’ the xy axis of this function.
      I’ll keep trying but I thought i’d go to the source.
      Thanks for any help in advance, and awesome and simple work, the way it should be.

      Reply
      • malihu
        Posted on April 13, 2011 at 07:53 Permalink

        Hi jay,
        I need to check your implementation online to see if I can help

        Reply
  26. Shv
    Posted on November 7, 2010 at 01:33 Permalink

    “shahid saifi” is right, really helpful&fantastic!
    I am a newbie, can you suggest how to change the code that would page is start from DIV id=”c2″ (Content 2) or “c3” (Content 3)

    Thanks in advance

    Reply
    • malihu
      Posted on November 7, 2010 at 13:17 Permalink

      Run Animate2id function when page loads like this:

      $(window).load(function(){
      Animate2id(“#c3″,”easeOutQuint”); return false
      });

      Put this code at the beginning of the script, right before Animate2id function, changing “#c3” to the div id you want.

      Reply
      • Shv
        Posted on November 7, 2010 at 19:40 Permalink

        Malihu thanks!
        but I’m probably quite kettle, is doesn’t work (
        It’s correct?

        $(window).load(function(){
        Animate2id(“#c3″,”easeOutQuint”); return false
        });
        function Animate2id(id,ease){
        var animSpeed=2000;
        var $container=$(“#container”);
        if(ease){
        var easeType=ease;
        } else {
        var easeType=”easeOutQuart”;
        }
        $container.stop().animate({“left”: -($(id).position().left)}, animSpeed, easeType);
        }

        Reply
    • malihu
      Posted on November 7, 2010 at 19:47 Permalink

      Yes it is correct. The reason it doesn’t work is because of wordpress quotes (happened because you copied the code from my comment). In your code, delete and re-type the double-quotes on the function and it’ll be ok.

      Reply
      • Shv
        Posted on November 7, 2010 at 20:11 Permalink

        yep, all is right.
        thank you very much!!!

        Reply
  27. Jorge
    Posted on October 21, 2010 at 05:19 Permalink

    That´s insane man :0, very useful!

    Reply
  28. shahid saifi
    Posted on September 22, 2010 at 10:34 Permalink

    You have a fantastic post here, really helpful.

    Reply
  29. Chichi
    Posted on September 15, 2010 at 16:25 Permalink

    Awesome. Works great in most browsers but the menu gets corrupted in chrome 6……. but it works great in safari. Don’t understand why that is.

    Reply
    • malihu
      Posted on September 16, 2010 at 02:02 Permalink

      Indeed! I’ll check it as soon as possible. Thanks for checking it Chichi

      Reply
    • malihu
      Posted on September 16, 2010 at 09:45 Permalink

      Code and files updated to work in Chrome 6. Seems Chrome acts weird when animating “body”, so I added a wrapper and scroll this instead using .position().left instead of srollLeft 😉

      Reply
  30. XHTML Valid Websites
    Posted on August 31, 2010 at 20:36 Permalink

    Nice one, bookmarked and added to my linklist 🙂

    Reply

Comments pages: 1 2

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