Smoothly Scroll Elements Into View - jQuery Smart Scroll

File Size: 3.87 KB
Views Total: 4014
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smoothly Scroll Elements Into View - jQuery Smart Scroll

Smart Scroll is a small jQuery smooth scroll plugin which smoothly scrolls page sections into view by clicking the anchor links.

Also provides a scrollspy functionality that automatically highlights the active anchor link when the corresponding page section is scrolled into view.

Suitable for modern one page website & single page web application.

How to use it:

1. Add page sections to the webpage. Note that each section must have a unique ID as follows:

<div id="page1">Page 1</div>
<div id="page2">Page 2</div>
<div id="page3">Page 3</div>
<div id="page4">Page 4</div>
<div id="page5">Page 5</div>

2. Create nav links pointing to the page sections.

    <li><a href="#!" data-scroll="page1">Page 1</a></li>
    <li><a href="#!" data-scroll="#page2">Page 2</a></li>
    <li><a href="#!" data-scroll="page3">Page 3</a></li>
    <li><a href="#!" data-scroll="#page4">Page 4</a></li>
    <li><a href="#!" data-scroll="page5">Page 5</a></li>

3. Initialize the plugin and done..

(function ($) {
  "use strict";
    // all parameters are optional

4. Apply custom styles to the active menu item.

nav ul {
  border-bottom: 2px solid dodgerblue

5. Customize the scrolling speed in milliseconds. Default: 500ms.

  speed: 1000

6. Enable/disable the scrollspy functionality.

  addActive: true, // default true
  activeClass: "active", // default active

7. Customize the distance from the top after scrolling. Default: 100px.

  offset: 50

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