🎯 Introduction

Hey there! 👋 If you’re building a sleek one-page website using the WordPress Gutenberg Block Editor, you might have noticed that clicking on anchor links (like “About Us” or “Contact”) updates the URL with a # symbol (e.g., https://your-site.com/#about-us). While this is standard behavior, you might prefer a cleaner URL without the hash, such as https://your-site.com/.
In this post, I’ll show you how to achieve smooth scrolling without the # in the URL, all without modifying your navigation links or Gutenberg blocks.

---

🧰 The Challenge

You’re using anchor links in your navigation menu, and when clicked, the URL changes to include a hash (#). While this doesn’t affect functionality, it can look a bit untidy. Plus, you might want to maintain a clean URL for SEO or user experience reasons.

---

💡 The Solution

To remove the # from the URL while still enabling smooth scrolling, you can use a simple JavaScript snippet. This method doesn’t require altering your navigation links or Gutenberg blocks.
Here’s the code:

javascript
CopyEdit
document.addEventListener("DOMContentLoaded", () => {
  const base = location.origin + location.pathname;
  document.querySelectorAll('a[href*="#"]').forEach(link => {
    const id = new URL(link.href).hash.slice(1);
    if (!id) return;
    link.addEventListener("click", e => {
      e.preventDefault();
      if (location.pathname !== new URL(link.href).pathname) {
        location.href = base;
      } else {
        const el = document.getElementById(id);
        if (el) {
          el.scrollIntoView({ behavior: 'smooth' });
          history.pushState(null, "", base);
        }
      }
    });
  });
});

Explanation:

• Wait for the page to load: The script runs once the DOM is fully loaded.
• Identify anchor links: It selects all anchor (<a>) tags containing a hash (#).
• Handle clicks: When an anchor link is clicked:
  • If the link points to a different page, it redirects to that page without the hash.
  • If the link points to the same page, it scrolls to the target section smoothly and updates the URL to remove the hash.

---

🛠️ How to Implement

1. Access Your WordPress Dashboard: Log in to your WordPress admin panel.
2. Navigate to Customize: Go to Appearance > Customize.
3. Add Custom JavaScript:

• If your theme supports custom JavaScript, paste the code into the appropriate section.
• Alternatively, use a plugin like Insert Headers and Footers to add the script.

1. Save Changes: Publish the changes and test your site.

---

✅ Benefits

• Clean URLs: Your site’s URL remains tidy without the #.
• Smooth Scrolling: Users experience seamless navigation between sections.
• No Need for Plugin: Achieve this functionality without installing additional plugins.

---

📌 Final Thoughts

Implementing this JavaScript solution allows you to enhance user experience by providing smooth scrolling and clean URLs, all without modifying your navigation links or Gutenberg blocks. It’s a simple yet effective way to improve your one-page WordPress site.