JavaScript Smooth Scroll to Anchor without jQuery

Yet another smooth scroll to anchor plugin to create custom table of contents, back to top button or general purpose smooth scrolling. The plugin “HD Smooth Scroll”, written in plain JavaScript, so it doesn’t require any external library to work.

Moreover, the plugin is really easy to implement in your projects. It can be fully customize with additional CSS or JS according to your needs.

Plugin Overview

Plugin: HD Smooth Scroll
Author: HD Code
Licence: MIT Licence
Published: September 17, 2019
Repository: Fork on GitHub
Dependencies: No Dependency
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 5.95 KB

How to Use JavaScript Smooth Scroll to Anchor Plugin

1. After downloading project, include the HD Smooth Scroll JavaScript plugin into your HTML document.

<!-- HD Smooth Scroll JS -->
<script src="js/hd-smooth-scroll.js"></script>

2. If you wanted to make table of contents, create section element (with a unique id) for your content blocks in HTML. Target these sections with hashtag links for smooth scroll.

<a href="#section-1">Go to section 1</a>
<a href="#section-2">Go to section 2</a>
<a href="#section-n">Go to section n</a>

<section id="section-1"> These are some contents of section one. </section>
<section id="section-2"> Here you can put some ideas for section two. </section>
<section id="section-n"> N blcok. </section>

3. If you wanted to create back to top button, simply use the following syntax.

<a href="#">Top of Page</a>

Note: You may need to style above mentioned elements with CSS. This JavaScript smooth scroll to anchor not have built-in CSS styles. 🙂

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.