jQuery Plugin For Vertical Fullpage Scrolling - Smart Scroll

Smart Scroll is a tiny jQuery plugin for providing smooth, vertical, fullscreen page scrolling with support for auto hashing and scroll snapping behavior. Helps in one page scrolling website which allows the visitor to smoothly scroll through the page sections with mouse wheel.

Basic usage:

1. Add your page sections into a container named 'section-wrapper'. Use the data-hash attribute to specify the hash tags displayed in the URL.

<div class="section-wrapper">
  <div class="section" data-hash="section-1">
    <div>
      <h1>Section 1</h1>
      <p>Paragraph 1</p>
    </div>
  </div>
  <div class="section" data-hash="section-2">
    <div>
      <h1>Section 2</h1>
      <p>Paragraph 2</p>
    </div>
  </div>
  <div class="section" data-hash="section-3">
    <div>
      <h1>Section 3</h1>
      <p>Paragraph 3</p>
    </div>
  </div>
  <div class="section" data-hash="section-4">
    <div>
      <h1>Section 4</h1>
      <p>Paragraph 4</p>
    </div>
  </div>
  <div class="section" data-hash="section-5">
    <div>
      <h1>Section 5</h1>
      <p>Paragraph 5</p>
    </div>
  </div>
</div>

2. Load the latest version of jQuery library and the jQuery smart scroll plugin in your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="smartscroll.js"></script>

3. Call the plugin to enable the vertical page scrolling.

$.smartscroll();

4. Options and defaults.

// vp - The sections will be automatically sized to be the same as the viewport
// set - Use the height and width set by CSS 
//       Use this for having different heights for different sections
mode: "vp", // "vp", "set"

// enable auto hashing
autoHash: true,

// enable section scroll
sectionScroll: true,
initialScroll: true,

// the CSS selector for the wrapper element
sectionWrapperSelector: ".section-wrapper",

// the class name applied to each section
sectionClass: "section",

// the selector applied to each section, overrides sectionClass and allow more flexibility in choosing a selector.
sectionSelector: null,

// animation speed in ms
animationSpeed: 300,

// the hash for the section above the sections
headerHash: "header",

// the width of the browser below which scrolljacking will be disabled
breakpoint: null,

// whether scrolling through different sections will be recorded in the browser's history
keepHistory: false,

//  If you pass in an EventEmitter object, autoHashing will be much more efficient. 
// You can also listen to the scroll events this way. Defaults to null.
eventEmitter: null,

// if you are going to be dynamically adding and removing content so as to change the position and/or size of the section wrappers and/or sections, then set this to true. 
// Set to false otherwise to increase performance.
dynamicHeight: false,

// If you need to support Internet Explorer 8
ie8: false,

hashContinuousUpdate: true,
innerSectionScroll: true,
toptotop: false,
bindSwipe: true,
bindKeyboard: true

Changelog:

2018-11-22

• Remove hard-coded animation speed

2017-12-20

• Fixed slide number not emitted w/ scrollEnd

2017-05-09

• JS update

2015-12-25

• Added option to allow for keyboard events to change slides.

2015-12-15

• Improved performance of plugin.
• Changed the arguments emitted with the events.
• Added option to allow top-to-top scroll

2015-12-11

• JS update

2015-05-07

• Correctly incorporating lethargy into smartscroll

2015-05-05

• responsive design.

2015-05-01

• Improved look on mobile
• Fixed bug with hybrid scroll

 

---

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