Drop Anchor, Captain! How to Add Anchors 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.
You're a Content Marketer looking to add anchors to Webflow. Abandoning ship is not an option, though the tides look rough from where you're standing.
Fear not, o' captain. This article will show you exactly how to add anchors on Webflow and even how to add anchor scrolling with code.
Let's start with the basics. What are anchor links, and why are they so important?
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, 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.
So, how do you add them 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," insert a unique ID for 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 use 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 deeplink 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.
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 content folks like you. Never mind the time it takes — you can also break your page if you input the code wrong. Nobody needs that kind of friction.
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
Here are some other pages you might find helpful
