Smoothly Scroll Elements Into View - jQuery Smart Scroll
File Size: | 3.87 KB |
---|---|
Views Total: | 3998 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
<nav> <ul> <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> </ul> </nav>
3. Initialize the plugin and done..
(function ($) { "use strict"; smartScroll.init({ // all parameters are optional })(jQuery);
4. Apply custom styles to the active menu item.
nav ul li.active { border-bottom: 2px solid dodgerblue }
5. Customize the scrolling speed in milliseconds. Default: 500ms.
smartScroll.init({ speed: 1000 })
6. Enable/disable the scrollspy functionality.
smartScroll.init({ addActive: true, // default true activeClass: "active", // default active })
7. Customize the distance from the top after scrolling. Default: 100px.
smartScroll.init({ offset: 50 })
This awesome jQuery plugin is developed by MohamedElmdary. For more Advanced Usages, please check the demo page or visit the official website.