The beauty of this plugin is you can implement it on the top navigation or inside the content area. It provides a smooth scroll when the user clicks on the hyperlinks on the page.
Furthermore, you can also use this plugin for general purpose such as FAQ, custom table of contents and back to top button.
In addition, If you are working on the one-page website then this plugin is just perfect for you to use.
It is an independent library which makes your work process fast, smooth and easy to use. It’s lightweight and works well with most of the desktop and mobile browsers.
Moreover, the plugin is really easy to implement in your projects. It can be fully customized with additional CSS or JS according to your needs.
<!-- HD Smooth Scroll JS --> <script src="js/hd-smooth-scroll.js"></script>
In the demo, We have created a style.css file to make the sticky navigation to show you how the plugin work. You may don’t need to add it if you already work on template which has the navigation.
Also in case, if you want to use the plugin within the content area then don’t include this file.
<link rel="stylesheet" href="style.css">
Next step to create the list of links and append unique hashtag # tag.
<a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> <a href="#section4">Section 4</a> <a href="#section5">Section 5</a>
Similarly, we need to define the
section and append a hash with an ID of an element to the URL.
<div id="section1">Section 1</div> <div id="section2">Section 2</div> <div id="section3">Section 3</div> <div id="section4">Section 4</div> <div id="section5">Section 5</div>
You can also create the back to a top button by simply defining the unique #hash tag.
<a href="#backtotop">Top of Page</a>
Note: You can write your own CSS to design the links and section content area. The plugin didn’t come with built-in CSS styles. You can use our demo style which included in the download file.