How to scroll to anchor smoothly with CSS and HTML?

Anchor tags are often used by web developers to scroll or navigate users to a specific section of websites. When we talk about providing the best user experience on our websites, then developers often consider applying a smooth scrolling effect for navigation. In this blog post, we’ll discuss smooth scrolling using HTML and CSS, and will help you understand with an example code.

Before we move over to learn about smooth scrolling you first need to have a background on anchor tags in HTML. Here is a short description of anchor tags and how to create & style them.

What is an anchor tag?

An anchor tag is a tag used in HTML to create a link to another section of the same document or to another document altogether. The link created by an anchor tag can be clicked on by a user to jump to the linked section.

Creating an anchor in HTML

You can create an anchor in HTML by using the anchor tag. The anchor tag takes two attributes, href and id. When creating a link with an anchor tag, the href attribute is used to specify the destination of the link. In its simplest form, the href attribute can be set to just # followed by the id of the element you want to link to. This will cause the browser to scroll to that element on the page.

However, simply using the # id anchor tag links can often result in a jarring, unsmooth scroll as the browser jumps directly to that element on the page. You can avoid this by using a little bit of CSS and specifying a smooth scroll behavior for anchor tags on your website.

Styling the anchor with CSS

If you want to style the anchor with CSS, you can use the ::before and ::after pseudo-elements. These will allow you to add content before and after the anchor element.

For example, you could use the ::before pseudo-element to add a left arrow, and the ::after pseudo-element to add a right arrow. This would give the anchor a nice look altogether.

To learn more about CSS pseudo-elements, check out our interactive course on codedamn.

Scrolling to Anchor Smoothly

Here’s a quick example code of how this works:

Let’s say you have a link to an anchor tag called #example. When someone clicks on that link, the browser will automatically scroll down to the section of the page with the id="example" attribute.

You can use this same technique to create a smooth scroll effect by adding a little bit of CSS to your anchor tag. By adding the "scroll-behavior: smooth" property to your anchor tag, you can tell the browser to smoothly scroll down to that section instead of jumping straight down.

#example {
  scroll-behavior: smooth;
}
Code language: CSS (css)

This CSS property is supported in most modern browsers, so you shouldn’t have any trouble getting it to work.

CSS and HTML Requirements

To scroll to an anchor smoothly using CSS and HTML, the following requirements must be met:

• The link to the anchor must be placed within an element.
• The ID of the anchor must be unique on the page.
• The href attribute value of the link must match the ID of the anchor.
• Add the CSS property "scroll-behavior: smooth" to the parent element of the link. This will ensure that when the link is clicked, the page will scroll to the anchor smoothly instead of abruptly jumping to it.

Conclusion

In conclusion, we have learned how to scroll to anchor smoothly with CSS and HTML. We have looked at how to create anchor tags and how to use CSS to add smooth scrolling behavior. I hope you found this blog post helpful and that you now feel confident implementing smooth scrolling on your own website.

Thanks for reading!

Happy coding! 🙂