One-page scrolling websites are slowly becoming more and more common. Squarespace itself has many one-page templates where the menu actually leads to different parts of the same page.
Now, there will be times where you want to accomplish this type of scrolling, but don’t know how to make it work. That’s why we’re going to show you exactly how. At the end of this guide, you’ll be able to create an anchor tag that will take people anywhere on any page. So let’s get started.
Creating the Anchor Tags and Links
Go the portion of your page where you want the scroll to land.
Insert a CODE block at this location.
In the CODE block, go ahead and add a unique ID. If the section is for a paragraph for “ABOUT US” you can make the ID about-us-section for example. You can name it anything you want, just don’t use spaces or special symbols except for the hypen (-).
Now you can go ahead and create a link where you want, it can be in the menu, it can be a picture with a link, or even a word or a button, and have the link lead to your new ID. So continuing from the above example, you can enter in the destination as #about-us-sectionOne thing to note here is that if the link leads to a different page. For example, if you put a button on your home page that says FIND OUT MORE and it leads to a specific section on a different page, make sure you include the URL SLUG for the other page. So for example, if my #about-us-section was on my ABOUT page and the button is on the home page, we would set the link as /about#about-us-section. If we didn’t include the /about then the browser would look for an ID called #about-us-section on the HOME page, and it’ll find nothing there. So we have to tell the browser that the ID we mention is on the ABOUT page.
Adding Smooth Scrolling (Not required)
Now that you have your anchor tag and links done, you’ll notice that this will take people to the specific section, but there’s no animation, so it’s hard to tell that the page has been scrolled. That’s where smooth scrolling comes in. With smooth scrolling enabled, people will land at the top of the destination page, and then the browser will automatically scroll them down to the section needed.
To get smooth scrolling working is super simple. Just add the following to SETTINGS → ADVANCED → CODE INECTION and into the top field for HEADER.