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.