Add a smooth scrolling anchor link on HubSpot

    Difficulty Level: Intermediate. This post assumes a solid understanding of HubSpot tools and some technical knowledge. Instructions are detailed and can be applied as they appear on the post.

    Many websites have links that scroll to a section further down the page "smoothly" (slow enough that you can see the scroll rather than jumping to the link). 

    There are two steps you need to take to implement this on your HubSpot site:

    1. Add the code for the effect
    2. Create your anchor links (the link and the section it will scroll to)

    Step 1: Add the code for the effect

    There are two options to create your smooth scrolling effect: the simpler but less widely supported CSS option and the more complex but more widely supported JavaScript option. Both are explained below.

    The Simple CSS Option

    In theory, there is a very simple snippet of CSS that you can use to achieve smooth scrolling using the scroll-behavior property. The code looks like this:

    html { scroll-behavior: smooth; }

    Ideally, this will be added into your website's stylesheet but, if you're not certain how to locate this, the simpler option for non-developers is to add it to the HTML head section. You can find this by going into your Settings > Website > Pages and finding the box that says "Site header HTML" (details here).

    If you see a tag that says <style>, add the code in just below that tag. Otherwise, add the code into the box in between style tags (in between the opening <style> tag and the closing </style> tag), like this:

    <style>
      html { scroll-behavior: smooth; }
    </style>
    Note: Unfortunately each browser is a world of it's own and this property isn't currently supported across all browsers. At the time of writing, it's supported on Chrome, Opera, Firefox and Android but is not supported on Internet Explorer, Edge, Safari or Opera for mobile. You can view detailed browser support for this property here.

    The JavaScript Option

    The more widely supported option is to use JavaScript to create your smooth scrolling effect. Similar to the above CSS option, ideally this will be in your website's script file (usually something like main.js) but, if you're not certain how to locate this, the simpler option for non-developers is to add it to the HTML footer section. You can find this by going into your Settings > Website > Pages and finding the box that says "Site footer HTML" (details here).

    Add the code into the box in between script tags (in between the opening <script> tag and the closing </script> tag), like this:

    <script>
      $('a[href*="#"]')
        .not('[href="#"]')
        .not('[href="#0"]')
        .click(function(event) {
           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) {
            event.preventDefault();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000, function() {
              var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) {
              return false;
            } else {
              $target.attr('tabindex','-1');
              $target.focus();
            };
          });
        }
      }
    });
    </script>

    This code is from the guys at CSS-Tricks, who have all kinds of great tutorials on front-end web development. Note their conversation about smooth scrolling and accessibility which raises some important concerns.

    Step 2: Create your anchor links

    Now that your website supports smooth scrolling, you'll need to create your links. Note that Call-to-Actions behave differently, you can read more on this below ⬅️ Pay attention to this link, we'll be using it as an example.

    There are two parts to creating your anchor links:

    1. You need to give the section you'd like to scroll to a CSS ID
    2. You'll need to create a link that points to that section's ID

    Step 1: Add an ID to the section you would like to scroll to.

    There are many ways of doing this. If you're working on a blog post and would like to add an ID to an element, you can go to Advanced > Source Code in your editor. Locate the element you would like to scroll to and, in it's opening HTML tag (the one before it), add this snippet:

    id="your-id-here"

    Your ID can be anything, but there are some basic rules (it should be unique, contain at least one character and no spaces). It's best to make it something descriptive, like the title or purpose of the section.

    In this post, the ID I added to the "What About Call-to-Actions?" section looks like this, where the ID is "what-about-ctas":

    Add an id to an element

    If there's a section on a web or landing page you would like to link to, you'll probably need to do so from the template level. To find the template, click into your page's Settings > Advanced Options and click on "Edit this Template" (details here).

    On the template, find the section you would like to scroll to, click on it and add the ID to your "CSS ID" section:

    Add an id to a template

    Step 2: Create a link to that section

    When you create your link now, instead of adding in a URL (like http://www.puppiesareawesome.com), you'll just add in your ID preceded with a hash symbol (#).

    In the case above, where I added the id what-about-ctas to the header below, my link would be #what-about-ctas (since you'll be scrolling, don't enable the "Open link in new window" option):

    Create an anchor link on a HubSpot Rich Text module

    What About Call-to-Actions?

    Marketers use call-to-actions across websites for reporting so many of you might be wondering how to apply smooth scrolling to a HubSpot CTA.

    Unfortunately HubSpot's CTA tool doesn't allow you to just type in an ID in the link section, like "#services". Instead they suggest that you write the full link "http://www.website.com/#services" which will cause the page to reload instead of applying your smooth scrolling.

    I would recommend creating a normal non-CTA link (you can always create clicked element events for tracking if you're on Enterprise) but if you simply must use CTAs, check out Ty's solution for a few possible workarounds.

    Last Updated: September 21, 2019

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    💻

    Looking for a HubSpot website developer?

    I can help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Designer & Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.