Creating a Smooth Scroll Effect with HTML and CSS

Smooth scrolling in HTML is one simple yet effective way to enhance the user experience of your website. Below are the steps of setting this up (probably in too much detail, but that’s a good thing).

Scroll-behavior: smooth

The scroll-behavior property is a CSS property that controls the smoothness of a scrolling element. By default, when a user clicks on an anchor link to navigate to a different section of a webpage, the browser instantly jumps to that section. However, with the simple line of scroll-behavior: smooth;, you can create a visually pleasing and smooth scrolling effect.

To implement smooth scrolling on your website, Update Your CSS with the following CSS rule to your existing stylesheet or create a new one if needed:

html { scroll-behavior: smooth; }

This can be applied too every anchor link on a Squarespace site by navigating Website > Website Tools > Custom CSS > paste the code above. This can be applied on an individual page with a </> Code Block and pasting the code between <style> </style> like so:

<style>
  
  html {
  scroll-behavior: smooth;
}
  
</style>

Anchors

An anchor tag is often denoted by the <a> HTML element. For this example, on a Squarespace website, I like using <div>. These links can lead users to different sections of the same page.

Let's break down the basic structure of an anchor tag using a <div> element:

<div id="NAME"></div>

• <div>: This is the opening tag of the element.

• id="NAME": The id specifies the destination of the link. This will be the code block on Squarespace that you type this into. It’s best to be one word. You can type literally anything here. What matters is the button you or text you link elsewhere needs to match. If you type “dingus” here, have your link be #dingus.

• </div>: This is the closing tag of the element.

With a Button block, or just hyperlinking text, you can link toy /name-of-your-page#test

Below I have written some code for an internal link to utilize the smooth scroll code above. If you clicked the button above, you were brought to the Coe Block below. We’re going to set the id for the link as “test”. The code below would be invisible on your webpage.

<div id="bottom"></div>