What is jquery-smooth-scroll plug-in?
The jquery-smooth-scroll plug-in enables smooth scrolling for the same page from one section to the other section. This can particularly be useful if you have a table of content in a web page with long text paragraphs.
The users are able to move to the particular section after clicking a link and no hash (#) will appear in the address bar.
Demo
Developer’s page Download plug-in
How to install and use the plug-in?
You may install the smooth scroll plug-in via npm:
npm install jquery-smooth-scroll
Or download the plug-in and get the jquery.smooth-scroll.js file and place it as per your directory structure. Include the reference below the jQuery:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script src=”js/smooth-scrolling/jquery.smooth-scroll.js”></script>
(You need jQuery 1.7+ for the plug-in’s version 2.0+.)
See the markup and script for initiating and using the plug-in in the demo below.
A demo of smooth scrolling
In this example, the dummy text is used for creating a few long paragraphs in the web page. You can see p1, p2, p3… and a scrollable div in the demo page. Click on the p1,p2 etc. for scrolling smoothly to the specified paragraph.
The scrollable div has two buttons below it. One is for scrolling vertically and the other is for horizontal scrolling. Besides, you can also see four buttons on the top left corner. These buttons allow you to scroll smoothly with page down and up. The first two buttons will scroll the page down and up by 100px respectively. Have a look:
See online demo and code
The simple markup that contains the links:
<ul id="smooth-nav"> <li><a href="#p1">Move to para 1</a></li> <li><a href="#p2"> Move to para 2</a></li> <li><a href="#p3"> Move to para 3</a></li> <li><a href="#p4"> Move to para 4</a></li> </ul>
Call the plug-in with options as shown in the code section of the demo page or read more about this nice plug-in on the developer’s page.