Using anchor links with smooth scrolling in Squarespace

Often, you may have a page on your site with a ton of content. Whether it be a wiki type page analyzing all the characters of your favorite TV show, an API documentation for your startup, or a “jump back to the top of the page” on a long post, anchor links make navigation simpler for your users. By following this guide you will be able to create anchor links just like the ones below.

Making Anchor Links

Adding Smooth Scrolling

Making Anchor Links

To make an anchor link, the first thing you have to do is determine where you the page to move to. On this article, we have 3 anchors. The first anchor is at the very top of the page, attached to the first paragraph. The second is attached the first heading, Making Anchor Links. The third is attached to the second heading, Adding Smooth Scrolling.

To create the link on an element, you have to write your text in a Code Block. When creating your text, be sure that the Edit Code module has HTML as the selected type. Then, wrap your text in the appropriate HTML tags. There are four common ways to create HTML tags in Squarespace.

• For paragraphs, wrap the text in <p></p>
• For Heading 1, wrap the text in <h1></h1>
• For Heading 2, wrap the text in <h2></h2>
• For Heading 3, wrap the text in <h3></h3></li>

Unlike when creating header text in the text block, all code block text looks like paragraph texts. When you view your blog in the full screen like your users will, the header will appear properly. If those options are not enough for you, you can find more HTML tags at W3Schools.

The next step is to create ids for the text. After the first part of the HTML tag, add id=”yourID”. You can replace yourID with any word without spaces. For a paragraph tag, it could look something like this:

<p id=”munoParagraph”>Muno Space is a great resource for learning how to add custom elements to Squarespace Sites</p>

An overview of this whole process is below:

Now comes the easy part! Simply create a link on any text on your page, click the External option, then type in your id preceded by a #. For this blog, this is how I made my link:

You can also link to that anchor from a completely different page. To do this, use the normal URL followed by the # and the ID you chose. To link to the next section, we would use #addingSmoothScrolling

Adding Smooth Scrolling

One cool additional feature that you may want to add is smooth scrolling. When using smooth scrolling, the page will “glide” from anchor link to anchor link on your page. This will create a less jumpy experience. Before beginning, from the main menu, click Settings → Advanced → Code Injection. On the Code Injection page, paste the following code into the Header textbox (if you already have this code in the box from a different code injection, you can skip this step):

JS
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Now to implementing Smooth Scrolling. To do this to a blog or a page, head to the main menu of Squarespace. From there, click Pages and then on the Settings icon for the Page or Blog icon that you want to add scrolling too. On the Advanced tab, paste in the following code in the Page Header Code Injection Box:

Jquery
     <script type="text/javascript">
      $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html,body').animate({
                scrollTop: target.offset().top
              }, 1000);
              return false;
            }
          }
        });
      });
    </script>

You can add this site-wide by heading to Settings → Advanced → Code Injection and pasting the code into the Footer text box. To make the scrolling faster or slower, just play with the 1000 number.
Lastly, add this css code to your sietewide css

CSS
    html {
  scroll-behavior: smooth;
}

And finally, if you would like to read this post once again:

Jump To Top