With the help of Javascript Smooth Scroll to Anchor plugin, you can easily create anchor links that go to the specific section when user click on.
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.
The “HD Smooth Scroll” plugin totally developed with Javascript and you don’t need to add any external library such as jQuery to make it work.
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.
How to Use JavaScript Smooth Scroll to Anchor Plugin
The implementation is quite easy. The plugin comes with Javascript file that you need o to include in your project. Let’s add the HD-smooth-scroll.js into your HTML document before closing head tag
<!-- 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 divor elementsection 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.