jQuery Smooth Content Scrolling Plugin - Smooth Scroll

File Size: 198 KB
Views Total: 8562
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Smooth Content Scrolling Plugin - Smooth Scroll

Smooth Scroll is a jQuery plugin that allows you to scroll any element of you page with smooth animation effect. With this plugin you can easily create scroll to top, scroll to content, horizontal scrolling, vertical scrolling on the same page.

Basic Usage (with Back Button Support):

1.  Markup

<ul id="nav">
<li><a href="#p1">p1</a></li>
<li><a href="#p2">p2</a></li>
<li><a href="#p3">p3</a></li>
<li><a href="#p4">p4</a></li>
<li><a href="#p5">p5</a></li>
</ul>

2. Include jQuery library and other necessary javascript files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="src/jquery.smooth-scroll.js"></script> 
<script src="lib/jquery.ba-bbq.js"></script> 

3. Call the plugin

<script>
    $(document)
    .on('click', 'a[href*="#"]', function() {
      if ( this.hash ) {
        $.bbq.pushState( '#/' + this.hash.slice(1) );
        return false;
      }
    })
    .ready(function() {
      $(window).bind('hashchange', function(event) {
        var tgt = location.hash.replace(/^#\/?/,'');
        if ( document.getElementById(tgt) ) {
          $.smoothScroll({scrollTarget: '#' + tgt});
        }
      });

      $(window).trigger('hashchange');
    });
  </script>

4. Options with default values.

exclude: [],
excludeWithin: [],
offset: 0,

// one of 'top' or 'left'
direction: 'top',

// if set, bind click events through delegation
//  supported since jQuery 1.4.2
delegateSelector: null,

// jQuery set of elements you wish to scroll (for $.smoothScroll).
//  if null (default), $('html, body').firstScrollable() is used.
scrollElement: null,

// only use if you want to override default behavior
scrollTarget: null,

// fn(opts) function to be called before scrolling occurs.
// `this` is the element(s) being scrolled
beforeScroll: function() {},

// fn(opts) function to be called after scrolling occurs.
// `this` is the triggering element
afterScroll: function() {},

// easing name. jQuery comes with "swing" and "linear."
// For others, you'll need an easing plugin from jQuery UI or elsewhere
easing: 'swing',

// speed can be a number or 'auto'
// if 'auto', the speed will be calculated based on the formula:
// (current scroll position - target scroll position) / autoCoeffic
speed: 400,

// coefficient for "auto" speed
autoCoefficient: 2,

// $.fn.smoothScroll only: whether to prevent the default click action
preventDefault: true

Changelog:

v2.2.0 (2023-08-30)

v2.2 (2017-05-06)

  • update

v2.1.2 (2017-01-20)

  • update

v2.0.1 (2016-09-07)

  • update

v1.7.2 (2016-01-25)

  • update

v1.6.2 (2016-01-17)

  • update

v1.6.1 (2015-12-27)

  • update

v1.5.6 (2015-09-09)

  • Add check for `document.scrollingElement`

v1.5.5 (2015-02-19)

  • Add commonjs to build process and bump.

v1.5.3 (2014-10-15)

  • Make plugin UMD-compliant (works with AMD, CommonJS, or neither)

v1.5.2 (2014-10-02)

  • Update docs & fix out-of-sync versions for bower.json and jquery config json

v1.4.13 (2013-11-03)

  • Add "options" argument feature to get/set options after init.

v1.4.12 (2013-09-20)

  • updated to the latest version

v1.4.11 (2013-07-16)

  • Add preventDefault option

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