---
title: Add a smooth scrolling anchor link on HubSpot
description: A tutorial on how to add smooth scrolling anchor links to your HubSpot CMS website.
image: https://www.stephanieogaygarcia.com/hubfs/Website%20Imagery/Stephanie%20OGay%20Garcia%20-%20HubSpot%20CMS%20Designer%20and%20Developer%20L.png
---
[Skip to Content](https://www.stephanieogaygarcia.com/hubspot-website-development/add-a-smooth-scrolling-anchor-link-on-hubspot#main-content)
[](https://www.stephanieogaygarcia.com/)
Open Navigation
- [About](https://www.stephanieogaygarcia.com/about)
- [Services](https://www.stephanieogaygarcia.com/services)
- [Products](https://www.stephanieogaygarcia.com/shop)
- [Work](https://www.stephanieogaygarcia.com/portfolio-work)
- [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development)
- [Contact](https://www.stephanieogaygarcia.com/contact)
- [About](https://www.stephanieogaygarcia.com/about)
- [Services](https://www.stephanieogaygarcia.com/services)
- [Products](https://www.stephanieogaygarcia.com/shop)
- [Work](https://www.stephanieogaygarcia.com/portfolio-work)
- [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development)
- [Contact](https://www.stephanieogaygarcia.com/contact)
[HubSpot Sprocket Icon HubSpot Website Development ](https://www.stephanieogaygarcia.com/hubspot-website-development)
[navigation](https://www.stephanieogaygarcia.com/hubspot-website-development/tag/navigation)
# Add a smooth scrolling anchor link on HubSpot
Technical Difficulty: Intermediate
Written by [ Stephanie O'Gay Garcia ](https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia)
First Published: September 21, 2019
Last Updated: September 21, 2019
⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! *(Last updated: September 21, 2019)*
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](https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of-my-pages)).
If you see a tag that says `` tag), like this:
``
**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](https://caniuse.com/#feat=css-scroll-behavior).
### 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](https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-can-i-add-code-snippets-to-the-head-and-footer-html-of-my-pages)).
Add the code into the box in between script tags (in between the opening `` tag), like this:
``
This code is from the guys at [CSS-Tricks](https://css-tricks.com/snippets/jquery/smooth-scrolling/), 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](https://www.stephanieogaygarcia.com/hubspot-website-development/add-a-smooth-scrolling-anchor-link-on-hubspot#what-about-ctas) ⬅️ *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":
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](https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-do-i-edit-my-blog-email-page-template)).
On the template, find the section you would like to scroll to, click on it and add the ID to your "CSS ID" section:
### 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):
## 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](https://knowledge.hubspot.com/articles/kcs_article/ctas/calls-to-action-frequently-asked-questions?#can-i-use-an-anchor-id-in-the-url-link-of-a-cta) 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](https://knowledge.hubspot.com/articles/kcs_article/events/create-clicked-element-events) for tracking if you're on Enterprise) but if you simply must use CTAs, check out [Ty's solution](https://community.hubspot.com/t5/CMS-Development/Anchor-Link-Scroll-Effect/td-p/1482?#lineardisplaymessageviewwrapper_6) for a few possible workarounds.
If you found this helpful, buy me a coffee! ❤️
← Previous Article
[How to add a breadcrumbs menu to your HubSpot page](https://www.stephanieogaygarcia.com/hubspot-website-development/how-to-add-a-breadcrumbs-menu-to-your-hubspot-page)
Next Article →
[Add a reading progress bar to your HubSpot blog](https://www.stephanieogaygarcia.com/hubspot-website-development/add-a-reading-progress-bar-to-your-hubspot-blog)
Contact
## Get help from a HubSpot CMS Expert
- Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
- Technical support and guidance on the HubSpot CMS
[ Tell me about your project ](https://www.stephanieogaygarcia.com/project-details)
##### Contact
Need help with a HubSpot CMS project? Get in touch!
[Email](mailto:stephanie@stephanieogaygarcia.com) | [Contact](https://www.stephanieogaygarcia.com/contact)
##### About
- [ About ](https://www.stephanieogaygarcia.com/about)
- [ Portfolio ](https://www.stephanieogaygarcia.com/portfolio-work)
- [ LinkedIn ](https://www.linkedin.com/in/stephanieogaygarcia/)
- [ Facebook ](https://www.facebook.com/stephanieogaygarcia)
- [ Instagram ](https://www.instagram.com/stephanieogaygarcia/)
##### Services
- [ HubSpot Website Development ](https://www.stephanieogaygarcia.com/services/hubspot-website-development)
- [ HubSpot CMS Technical Support ](https://www.stephanieogaygarcia.com/services/hubspot-cms-technical-support)
- [ Custom HubSpot CMS Themes ](https://www.stephanieogaygarcia.com/custom-hubspot-cms-hub-themes)
- [ Pricing ](https://www.stephanieogaygarcia.com/services#pricing)
##### Latest Articles
- [How to add an llms.txt page to your HubSpot website](https://www.stephanieogaygarcia.com/hubspot-website-development/add-an-llmstxt-page-to-your-hubspot-website)
- [Switch an existing HubSpot custom module from global to local](https://www.stephanieogaygarcia.com/hubspot-website-development/switch-an-existing-hubspot-custom-module-from-global-to-local)
- [Overriding HubSpot's new forms styling from theme settings](https://www.stephanieogaygarcia.com/hubspot-website-development/overriding-hubspots-new-forms-styling-from-theme-settings)
- [All Articles](https://www.stephanieogaygarcia.com/hubspot-website-development)
---
Copyright © 2018 - 2026 Stephanie O'Gay Garcia. All Rights Reserved.
Freelance HubSpot CMS Developer based in Toronto, Canada 🇨🇦
[Terms of Service](https://www.stephanieogaygarcia.com/terms-of-service) | [Website Terms of Use](https://www.stephanieogaygarcia.com/website-terms-of-use) | [Privacy](https://www.stephanieogaygarcia.com/privacy-policy) | [Cookies](https://www.stephanieogaygarcia.com/cookie-policy) | [LLMs](https://www.stephanieogaygarcia.com/llms.txt)
Scroll to Top
```json
{
"@context" : "https://schema.org",
"@id" : "https://www.stephanieogaygarcia.com/#person",
"@type" : "Person",
"description" : "Freelance HubSpot CMS Developer specializing in custom HubSpot website development, themes, templates, and bespoke modules for small–mid sized B2B and SaaS companies.",
"image" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg",
"jobTitle" : "Freelance HubSpot CMS Developer",
"knowsAbout" : [ "HubSpot CMS", "HubSpot themes", "HubSpot templates", "HubSpot modules", "HubDB", "Website migrations to HubSpot CMS", "Figma to HubSpot implementation" ],
"name" : "Stephanie O'Gay Garcia",
"sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ],
"url" : "https://www.stephanieogaygarcia.com/",
"worksFor" : {
"@id" : "https://www.stephanieogaygarcia.com/#organization"
}
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://www.stephanieogaygarcia.com/#organization",
"@type" : "Organization",
"address" : {
"@type" : "PostalAddress",
"addressCountry" : "IE",
"addressLocality" : "Dublin",
"postalCode" : "A94"
},
"contactPoint" : {
"@type" : "ContactPoint",
"areaServed" : "Worldwide",
"availableLanguage" : [ "en", "es" ],
"contactType" : "sales",
"email" : "stephanie@stephanieogaygarcia.com"
},
"description" : "Portfolio and business site of freelance HubSpot CMS Developer Stephanie O'Gay Garcia, based in Dublin, Ireland.",
"logo" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg",
"name" : "Stephanie O'Gay Garcia",
"sameAs" : [ "https://www.linkedin.com/in/stephanieogaygarcia/", "https://www.facebook.com/stephanieogaygarcia", "https://www.instagram.com/stephanieogaygarcia/", "https://ecosystem.hubspot.com/marketplace/solutions/stephanie-ogay-garcia/" ],
"url" : "https://www.stephanieogaygarcia.com/"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://www.stephanieogaygarcia.com/#website",
"@type" : "WebSite",
"name" : "Stephanie O’Gay Garcia – Freelance HubSpot CMS Developer",
"publisher" : {
"@id" : "https://www.stephanieogaygarcia.com/#organization"
},
"url" : "https://www.stephanieogaygarcia.com/"
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Stephanie O'Gay Garcia",
"url" : "https://www.stephanieogaygarcia.com/hubspot-website-development/author/stephanie-ogay-garcia"
},
"dateModified" : "2019-09-23T15:06:44.270Z",
"datePublished" : "2019-09-21T19:17:30.000Z",
"headline" : "Add a smooth scrolling anchor link on HubSpot",
"mainEntityOfPage" : {
"@id" : "https://www.stephanieogaygarcia.com/hubspot-website-development/add-a-smooth-scrolling-anchor-link-on-hubspot",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg"
}
}
}
```