There are a few different steps to add a scroll-down button in Squarespace. The first step is to select the page that you want to add a scroll-down button to. To do this, click on the “Edit” button at the upper-left corner of the page.
From there, go to the section that you want to link to your scroll-down button and add a Code block. Just click on the “Add block” button and select “Code” from the options.
Then, click on the pen icon on top of the Code block to edit it.
Create a name that will serve as the id of your section. Use the code template below and add it to the field in the Code block:
<div id=”TheIdNameOfYourSection”>
</div>
Once done, go to the section where you want to add your scroll-down button. From there, click on the “Add block” button and select “Button” from the block options.
Now, change the details of your button block by clicking on the pen icon at the top.
Then, type in the button text on the field provided and add a link by following the template below.
#TheIdNameOfYourSection
Once done, save your changes by clicking on the “Save” button at the top, then exit the page editor.
After linking the scroll-down button to the section, we can also add a smooth scrolling effect. To do this, go to the Design settings of your page and select the “Custom CSS” option.
From there, add the code below in the Code Injection field to add a smooth scrolling effect to your site. From there, click on the “Save” button to save your changes.
html {scroll-behavior: smooth;}
To see your changes in action, try refreshing the page and going into full-screen mode, then try out your new scroll-down button! And that’s it!
Adding a scroll-down button in Squarespace is easy and can be done in a few steps. You can do this by adding a code block that will serve as an anchor link to the scroll-down button and then using the Custom CSS design option to add a smooth scrolling effect. Whichever method you choose, be sure to style your button using CSS so it looks great on your site!
