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: January 17, 2024
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. 🙂

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...