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.

 


55 Comments

Post a comment

Comments pages: 1 2

  1. Suresh kamrushi
    Posted on February 27, 2018 at 08:29 Permalink

    Perfect solution.

    Reply
  2. edis
    Posted on August 17, 2014 at 23:04 Permalink

    Hi Malihu.

    Like this plugin a lot. Your whole ewbsite is full of good stuff.

    I have one question though : i suppose the top navigation can be transformed into dots, the slidin to target functionality would remain. But if i want to add two arrows so that i can slide left or right, what would the jquery code look like?

    If you have the tima, thanx.

    Reply
    • malihu
      Posted on August 20, 2014 at 00:35 Permalink

      In the included example (http://manos.malihu.gr/repository/horizontal-page-animation-with-jquery/demo/demo.html), assuming you add the following links (representing next and previous arrows):
      <a href="#next">Right arrow</a> <a href="#prev">Left arrow</a>

      The jquery code could be:
      $("a[href='#next'],a[href='#prev']").click(function(e){ e.preventDefault(); var current=$(".mPS2id-target"), to=$(this).attr("href")==="#next" ? current.next().attr("id") : current.prev().attr("id"); if(to){ $.mPageScroll2id("scrollTo",to); } });

      The above would normally be placed after mPageScroll2id function call.

      Reply
  3. Hakimo
    Posted on October 31, 2012 at 12:00 Permalink

    Hi Malihu. Thanks very much for the cool plugin. But I’m having a bit of trouble and wondering if you can answer my questions.

    I decided to add more pages e.g. #c7 and #c8. I also adjusted the width of the container to 13500px to cater to the 8 pages. Right now the sliding works if you click on Content 7 and Content 8. But if you click pages 1 – 7 from Page 8, it will snap to those pages. How can i have a clean transition of pages? e.g. if you click page 4 from page 6, the transition is smooth.

    Hope you can help.

    Thanks very much.

    – Hakimo

    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