How to Add Anchor Links in Webflow
TL;DR:
- Anchor links are deep links to specific sections of a page, helping users navigate and save time.
- To add anchor links in Webflow, open the blog post in the CMS collection, click "Embed Code," and insert the code
<a id="anchor-id"></a>. - Letterdrop integrates deeply into Webflow and offers an easier way to add anchors and publish directly to your Webflow site. This both saves times and avoids technical mistakes that could break your page.
Adding anchors to your content pages seems a little technical from where you're standing — and it's not uncommon for you or other content folks to lose time on code embeds in Webflow.
Hopefully, this step-by-step guide will help you get comfortable with anchor links in Webflow. (There's even a way to simplify it and take away the code element of it.)
What Are Anchor Links?
An anchor link is a deep link to a specific section of a page. This could be a button on your page that reads "Jump to the section" and takes the user to the exact section it was talking about.
Each link has a unique identifier (ID) that tells your browser where to direct the user to.
You create a direct path to relevant content on your pages for users to navigate your pages more effectively.
Why Do I Need Anchor Links?
Anchor links are often used to help users navigate around a page — in a table of contents, in FAQs, smooth scrolling navigation menus, and when deep linking from one page to a specific section of another. They save users time from scrolling through a page and looking for the right section.
As a result, users don't bounce off your site because they can easily find what you're pointing them to instead of getting lost and leaving.
Anchor links and anchor text are also good for SEO, since they help Google understand what your pages are about. (This is particularly true for internal links, but that's for the scope of another article.)
So, how do you add anchor links to your Webflow blog to increase visitor time on site?
How to Add an Anchor Link in a Webflow Blog Post
In Webflow, you add anchors in the same place that you edit your blog posts. Here's a step-by-step guide on how to add anchors from the blog CMS:
1. Open your blog post in the right Blog CMS collection.
2. Find the place where you'd like the anchor to be. For this example, we want our anchor at this heading.
 |
3. Click the "Embed Code" option that appears when you click near the desired section. We did this in the first line beneath the heading.
 |
4. Insert the following code: <a id="anchor-id"></a>. Instead of "anchor-id," give a unique ID to your anchor. It should be all lowercase and not contain any spaces. We're using the ID "demo-anchor" below.
 |
5. Save your blog post.
6. Whenever you wish to insert a link associated with the anchor you created on your web page, you need to place the unique ID for that anchor after a # in the URL. So for example, if your blog post is at https://acme.com/blog/a-case-study, and you created an anchor to a section with the anchor ID demo-anchor, the final link you would use is https:/acme.com/blog/a-case-study#demo-anchor.
7. Publish your site.
You're almost done. Now you need get your site to scroll down to your newly introduced anchor.
How to Add Anchor Scrolling in Webflow
Your page may have multiple anchor links. When you deep-link to an anchor, you want the page to auto-scroll down to the right section.
Here's the code you will need to add anchor scrolling:
<!-- Anchor Scrolling -->
<script>
window.addEventListener("load", function() {
// Get the anchor id if present
var anchorId = location.hash.replace("#","");
if (anchorId) {
// Get the div you want to scroll to
var anchor = document.getElementById(anchorId);
if (anchor) {
anchor.scrollIntoView();
}
}
);
</script>1. Copy the above code.
2. Go to the "Pages" view in Webflow.
3. Click on the Settings icon on your Blog Posts template. This is under the "CMS Collection Pages" section.
 |
4. Paste the code under "Custom Code" -> "Inside <head> tag." Hit save.
 |
Now your site will scroll down to the relevant section when you deep link with an anchor.
How to Style Your Links
To style all links in Webflow, you can select any link element and open the Style panel. In the Selector field, choose HTML tags and then select "All links". This allows you to make changes to the default appearance of links on your site (color, font size, text decoration, and more.)
This can help you match your overall website style and branding.
Letterdrop Lets You Add Anchor Links in One Click
Let's face it. Adding anchors in the Webflow CMS presents a big technical challenge to marketers without a technical background. Never mind the time it takes — you can also break your page if you input the code wrong.
Letterdrop integrates with Webflow and can push content directly to the CMS. To add anchors in Letterdrop, you simply select the element or text you'd like to anchor and click the anchor icon.
Fill in the anchor ID from there.
 |
By integrating your Webflow blog with Letterdrop's CMS, you can save time and avoid mistakes. Talk to us to start using Letterdrop with your Webflow blog right away.
Subscribe to newsletter
No-BS growth strategies and content marketing tactics in your inbox twice a month.
Related Reading
Some other posts you might find helpful
