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. 🙂
Similar Code Snippets:
CSS Newspaper Column Layout with jQuery Columnizer
Show GDPR Cookie Consent Message with jQuery
Bootstrap 4 Modern Pagination with jQuery
Cards Stack With Scrolling Effect Using CSS
Smooth Scroll in Vanilla JS
Change Navbar Color on Scroll JavaScript
jQuery Floating Label - Move Placeholder to Top on Typing
jQuery Circular Progress Bar with Percentage
jQuery Scroll to Next Section on Scroll - snapScroll.js
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.