Anchor Links

What does this code do?

This code snippet will allow you to use anchor links to jump down to a specific spot on a page.

Note: Anchor Links can be tricky and may not work on every template.

Code Snippets

Copy and paste this code into a Code Block directly above the section you would like the jump to.

<div id='ANCHORNAME'></div>

Same Page

To jump down the same page, link text or a button to the following.

#ANCHORNAME

Different Page

To jump down a different page, link text or a button to the following.

Squarespace 7.0

/PAGEURL#ANCHORNAME

Squarespace 7.1

https://example.com/PAGEURL#ANCHORNAME

If you are using Squarespace 7.1, you also need to add the following to Settings > Advanced > Code Injection > Header

<!-- Anchor Links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('html, body').hide();
        if (window.location.hash) {
            setTimeout(function() {
                $('html, body').scrollTop(0).show();
                $('html, body').animate({
                    scrollTop: $(window.location.hash).offset().top
                    }, 1000)
            }, 0);
        }
        else {
            $('html, body').show();
        }
    });
</script>
<!-- End of Anchor Links -->

Bonus Tip:

Combine this code snippet with the Smooth Scroll code snippet to have your anchor link have a smoother transition.

How To Use It

1. Copy and paste the code snippet as indicated above.

2. Change ANCHORNAME to a unique name for that section such as servicetwo.