Skip to main content

How to achieve 'smooth scroll' on a website

| Gianluca Gabella | Tips & Tricks
share on facebook share on twitter share on linkedin

Index:


By default, when you use an anchor in a web page, the browser's 'shift' to the anchor is immediate. The risk is that the user does not understand what has happened and has a moment of disorientation. How to activate smooth scroll on a website?

What is scroll in the web?

Very simply, the scrolling of the web page (up or down) towards a specific point, which is called an 'anchor'. Very often these anchors are used in landing pages to lead the user to the contact form, or in particularly long pages that require division into chapters and a consequent table of contents.

How do you create an anchor in HTML?

The process is very simple.

First of all, the 'landing' section is created. The ID attribute is used, which, by definition, is unique on the page (so there is no problem for the browser to figure out where to 'land'). For example, we can associate it with a DIV:

<div id="landing">This is the section of the page where I want my users to land</div>

Any HTML tag may be used: H1, H2, etc.

At this point we need to create the 'take-off' link: that is, a link which, if clicked, will move the browser screen to the DIV created above.
This is done by using the HREF attribute of the A tag, writing the hash mark and the ID of the target element:

<a href="#landing">To infinity and beyond!</a>

The game is done! The browser now knows that, when the link is clicked, it must take the browser screen to the div with the 'landing' ID

How do I activate smooth scroll?

By default, browsers use immediate scrolling: the screen goes instantly to the target element, without latency or sensation of movement. Despite the fact that this type of scrolling is immediate and faster, the sudden change of view can slightly confuse the user who, if he does not know that he is dealing with an anchor, may no longer understand which part of the page or site he is in.

To get around this problem just add a simple CSS rule (anywhere in your style sheet, if your site is a Joomla you probably have a custom.css available in the template in which to insert this rule):

html {
   scroll-behavior: smooth;
}

The end! Now your browser will move up or down more slowly, giving just the impression of movement.

Personally, I think this is an essential feature for a matter of aesthetics and above all for the usability of a website.

Now let's learn what smooth scroll recursion is!

Important note: this feature is fully supported by all modern browsers. Some old browsers (very old Internet Explorer for example) may not recognise it. No harm done, the browser will still go up and down instantly as if nothing happened, but there will be no problems with page readability.


If you liked this article, please share it!

share on facebook share on twitter share on linkedin
condividi su Facebookcondividi su Twittercondividi su LinkedIncondividi su WhatsAppcondividi su Telegram