Makers Byte
Published in

Makers Byte

How to activate smooth scrolling for href?

A snippet of code for activating smooth scrolling on any href with hash tag

Anchor links allow you to easily jump between areas of your page without scrolling up and down, looking for specific sections manually. Adding a smooth scrolling feature to your anchor links brings a seamlessly scroll down the page, instead of a sudden jump from one section to another.

If you wish to scroll a user based on a click of a #hash tag, here is a snippet of code written in jQuery to help you do that.

All you need to do is place it before </head> tag.

Here is the demo how it will function:

Add-on: Smooth Scrolling via CSS

Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container):

html {
scroll-behavior: smooth;
}

If you enjoyed this post…it would mean a lot to me if you could click on the “claps” icon…up to 50 claps allowed — Thank You!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shahzaib Khan

Shahzaib Khan

Data Scientist, Developer, Tech Writer, Entrepreneur and Computer Science Enthusiast. Connect with me @ https://linkedin.com/in/shahzaibkhan/