Smooth scrolling code snippet

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Transcript

Introduction

In this lesson we will learn to create a one-page site. We will explore how to create a front page template, create a fixed header, add links and anchors, and implement smooth scrolling.

Example site

Here is the example website I created with my sticky header and when I click on the menu item, it takes me directly to that section on the page. I achieved this by creating in-page links and anchors. As I am creating a one-page website, I have not created any pages, as I am going to add a front page template and build my entire site on the front page template. To do that, let’s make our way to the Site Editor. Select templates and then click on Add new template. Then we can go ahead and add the front page template. Then, I added all the content of my page. As you can see, I’ve added my header with my site logo and Navigation block, a cover section, an about section, a section to display my work as this is a portfolio website for an architect, and then a contact section. I’ve used a forms plugin to add this contact form to my site. And right at the bottom we have our footer.

Links

Let’s start with our header and add links. The first link we will add to our navigation menu is called ‘About.’ In the sidebar settings, below Text is the name of the link, and below Link we write #about, or the name of the link. Then, we do exactly the same for the other two sections. So the second link is called ‘My work’, and then we change the link to #mywork. And then we proceed to the contact navigation item and add #contact below Link. Then, we can go ahead and hit Save.

Anchors

Next we need to add HTML anchors for each section on our page. So to do that select the section in your List View and then make your way to ‘Advanced’ at the bottom of your sidebar settings. Below HTML anchor you add the name of the relevant link. Below the ‘About’ link we added #about, so in this case the HTML anchor would be called ‘about’. When you add your anchor, remember it should be in lowercase and without spaces. Please note that anchors are specific points on your webpage that you can link to directly. Think of them as bookmarks within your page. When you click on a link with an anchor, it takes you straight to that section of the page. Next, we can select the ‘My work’ section and add the HTML anchor. We will type ‘mywork’ in lowercase without any spaces. Lastly, we can do the same for the contact section. And then click Save. You will notice in the List View, next to each section, that the anchor has been added. On the front end, we can now see our navigation menu is in place, and when we click on a link or a navigation item, it will take us directly to that section. But we still have to make our header sticky.

Sticky header

Let’s return to the front page template. To make our header sticky, we need to wrap our header in a Group block. Once we wrap it in a Group block, we can go to our sidebar settings and below position. We can click on default and then select ‘Sticky.’ Next, I will change the background color of my Group block to the same as my site. Once we hit Save, we can view our site on the front end, and we will see that our header is sticky. And that our anchors are also in place.

Smooth scrolling

The last thing we want to talk about is smooth scrolling. I added some CSS to establish smooth scrolling when moving from one section to the next. In this lesson, we don’t have time to go into depth regarding CSS, but I will show you how you can grab this code snippet to add smooth scrolling to your site. In short, CSS stands for cascading style sheets and determines the appearance of your site by applying rules to the HTML content. To add additional CSS to your site, click on the Styles icon at the top right and then on the three vertical dots. And then click on Additional CSS. As we can see, I have already added a short code snippet to add smooth scrolling to my site. And I will also add it below the video for you to copy and paste. For accessibility, I wrapped this functionality in a preferred reduced motion media query. This respects the user’s preferences and only kicks in when they haven’t explicitly disabled the option on their device. Let’s remove the CSS to see how it impacts our site. When removed, we can return to the front end of our website. And when we click on a link, it takes us directly there with no more smooth scrolling. But we can quickly change that by re-adding the CSS code snippet.

Conclusion

I trust you feel more confident now adding a front page template, a sticky header, labels, anchors, and some CSS code to establish smooth scrolling.