Create Smooth Scroll Anchor Links to Sections in Squarespace.

Create Smooth Scroll Anchor Links with SquareKicker

With SquareKicker you can create a link that scrolls to any section or page on your site without using a single line of code.

 

 

Let's create this

First we need to add an Anchor Link to the Squarespace section we what to scroll to.

1. Select the Squarespace Section you want the Anchor Link to connect to.
2. Click the SquareKicker icon.
3. Open the Advanced tab.
4. Select the Anchor Link menu option.
5. Create a Section ID by entering a text of your choice into the Section ID field.
6. Save these changes by clicking Apply.

Now we can set up a link to trigger the Anchor Link

1. Select the element you want to set as a trigger. This can be anything with a link applied (button, text, image, navigation, etc)
2. Click the Squarespace edit icon (pencil).
3. Under LINK enter the text you enter in the Section ID field preceded by #. For example, if your Section ID is the word 'button', then you will enter #button in the LINK field.
4. If your link is on a different page from your Anchor Link Section, you will need add the page url proceeding the Section ID.  For Example: if the page of your section your linking to has the URL of  '/about' then your full link will be '/about#button'.

We can now change the speed and offset of the scrolling animation.

1. Click on the the SK Menu (SK icon at the top right of the screen).
2. Select Site.
3. Open the Advanced tab
4. Enter the Smooth Scroll menu option.
5. Click the Enable toggle.
6. Adjust the speed. You can do this with the slider or my clicking the number filed and entering your own number.
7. Adjust the Offset. The default is 0px. This is the position from the top of the screen the section will scroll to.  
8. Save these changes by clicking Apply.