Webflow Tutorial: How to Remove Anchor Link Hashes from the URL

If you have a website with anchor links, you may have noticed that the URLs can get messy with the hash at the end. However, with Webflow and a little bit of JavaScript, you can easily remove the anchor link hashes from the end of your URLs. In this tutorial, we will walk you through the process of achieving this functionality in your Webflow project.

Why Remove Anchor Link Hashes?

When you have anchor links on your webpage, the URLs can get cluttered with the hash value at the end. This can be problematic when users want to share the URL, as the hash may send them to a specific section of the page instead of the top. By removing the hash, you can ensure that the URLs remain clean and user-friendly for sharing.

Live Example

Let's take a look at a live example to see how this functionality works. When anchor scrolling to different sections on the page, you'll notice the hash being added to the end of the URL in the browser. The aim is to remove this hash dynamically to keep the URL clean and easy to share.

Setting Up Anchor Scrolling in Webflow

In the Webflow Designer, set up anchor scrolling on your page. Each anchor section should have a unique ID, such as "services," "portfolio," and "contact." Additionally, ensure that your menu buttons have a common class applied, such as "menu-btn," which will be used for targeting with JavaScript. The class will not be unique, but it will serve as a reference for the JavaScript code.

JavaScript Code for Removing Anchor Link Hashes

Now, let's dive into the JavaScript code that will enable us to remove the anchor link hashes from the URL.

<script>  document.addEventListener("DOMContentLoaded", function() {    var menuBtn = document.querySelectorAll('.menu-btn');        menuBtn.forEach(function(btn) {      btn.addEventListener('click', function() {        setTimeout(function() {          removeHash();        }, 5);      });    });        function removeHash() {      history.replaceState("", document.title, window.location.pathname + window.location.search);    }  });</script>

Breaking Down the JavaScript Code

• We start by waiting for the DOM to be ready using document.addEventListener("DOMContentLoaded", function() {.
• We then select all the elements with the class ".menu-btn" and iterate over them using forEach.
• Inside the event listener for each menu button click, we set a short timeout of 5 milliseconds before executing the removeHash function.
• The removeHash function utilizes HTML5 History API to manipulate the URL and remove the hash symbol.

Implementation in Webflow

To implement this code in Webflow, follow these steps:

1. Access the Webflow Designer: Once you've signed in to Webflow, open the desired project in the Webflow Designer.

2. Insert the Custom Code: Click on the Gear icon in the top-right corner of the Designer to access the project settings. Then, go to the Custom Code tab.

3. Insert the JavaScript: Paste the JavaScript code provided above just before the closing </body> tag in the Footer Code section.

Once you've saved your changes, the anchor links on your Webflow site will now dynamically remove the hashes from the URL after scrolling to the respective sections.

Summary

By utilizing JavaScript in conjunction with Webflow, you can enhance the user experience on your website by ensuring clean and shareable URLs even with anchor links present. This not only improves the overall user experience but also makes your content more accessible and shareable across various platforms.

Now that you've learned how to remove anchor link hashes from URLs in Webflow, you can implement this hack in your own projects to create a seamless browsing experience for your users. Happy coding with Webflow!