Buy me a coffee

Anchor Links in Squarespace 7.1

Anchor links – When you click items on the menu, it will jump to the corresponding position on the current page or another page.


  • We have 2 pages: Home, Contact
  • Home page, there are 3 sections: About, Services, Pricing.


Header Menu includes: Home, About, Services, Pricing, Contact

  • On the homepage, when clicking “About” or “Services” or “Pricing” >> the browser needs to go to the corresponding section on current page.
  • On the contact page, the browser also needs to navigate to the corresponding section, on the home page.

How to do:

1. Insert ID

Add Code Blocks > Insert the 3 corresponding IDs into 3 sections on the homepage.

For About section

<span id="about"></span>

For Services section

<span id="services"></span>

For Pricing section

<span id="pricing"></span>

2. Add anchor links to Navigation

Add 3 Link Items

and use this format.




You will have.

Save. Done!

3. Fix some issues

(Mobile) Menu will not close automatically after clicking the anchor link

Add this code to Home > Settings > Advanced > Code Injection Header

<script src=""></script>
  $('.header-menu-nav-item a').click(function(){

Smooth Scrolling

Add this code to Home > Design > Custom CSS

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;

Notes: this code doesn’t support Safari

Add this code to Home > Settings > Advanced > Code Injection > Footer

(Code from W3schools)

<script src=""></script>
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
    } // End if


(Mobile) Sticky Header after clicking Anchor Links

You can edit Site Header > Style > Enable: Fixed Position

You can also use these code 😀

Add this to Home > Settings > Advanced > Code Injection > Footer

<script src=""></script>
jQuery(window).scroll(function() {
    var height = jQuery(window).scrollTop();
    if(height > 60) {
    } else {

and add this to Home > Design > Custom CSS

.fixed-header header#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;

(Mobile) Sticky Only Burger icon when clicking anchor links

Add this code to Home > Design > Custom CSS

body.fixed-header .header-announcement-bar-wrapper #site-title {
    display: none

body.fixed-header .header-announcement-bar-wrapper {
    transform: translatey(0) !important;
    background-color: transparent !important
body.fixed-header .header-title-logo {visibility: hidden !important;}

2 thoughts on “Anchor Links in Squarespace 7.1”

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder