Creating A Horizontal Scrolling Website with jQuery horizonScroll.js

horizonScroll.js is a jQuery plugin that enables mobile-compatible horizontal scrolling on your one page website, similar to the full window page slider.

How to use it:

1. Load jQuery library and the jQuery horizonScroll.js in your project.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.horizonScroll.js"></script>

2. Load the jQuery touchSwipe plugin for touch swipe / mouse drag support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

3. Create next/prev navigation.

<div class="horizon-prev"><img src="images/l-arrow.png"></div>
<div class="horizon-next"><img src="images/r-arrow.png"></div>

4. Create sectioned content for your website.

<section data-role="section" id="section-section1"></section>
<section data-role="section" id="section-section2"></section>
<section data-role="section" id="section-section3"></section>
<section data-role="section" id="section-section4"></section>

5. The required CSS for your one page scrolling website.

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

section {
  float: left;
  display: block;
  height: 100%;
  padding: 0;
  margin: 0;
}

.horizon-prev,
.horizon-next {
  position: fixed;
  top: 50%;
  margin-top: -24px;
  z-index: 9999;
}

.horizon-prev { left: 20px; }

.horizon-next { right: 20px; }

6. Initialize the plugin with default options.

$('section').horizon();

7. Default plugin options.

$('section').horizon({

scrollTimeout: null,
scrollEndDelay: 250,
scrollDuration: 400,
i: 0,
limit: 0,
docWidth: 0,
sections: null,
swipe: true,
fnCallback: function (i) {
}

});

Change log:

2015-02-25

• Added support for element IDs using scrollTo()
• Added support for animating the scroll to a section via hash links

2015-02-21

• A small bug fix where the index was being set in the scroll left and scroll right functions but not the scroll to method. Now it is always set in scroll to because all methods call it.

---

This awesome jQuery plugin is developed by trgraglia. For more Advanced Usages, please check the demo page or visit the official website.