如何在Elementor中创建锚点并隐藏地址栏的锚点后缀

要实现锚点正常滚动但地址栏不显示#layanan这类哈希值，核心思路是拦截默认锚点跳转行为，手动实现滚动后修改浏览器历史记录，具体方法如下：

方法一：全局自定义JavaScript（推荐） #

适用于页面上所有锚点链接，一次性解决问题：

1. 进入WordPress后台，打开「外观」→「自定义」→「额外代码」（或Elementor编辑器的「页面设置」→「自定义代码」）。
2. 在JavaScript输入框中粘贴以下代码：

// 拦截所有锚点链接的点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault(); // 阻止默认哈希跳转行为
        
        const targetId = this.getAttribute('href').slice(1);
        const targetEl = document.getElementById(targetId);
        
        if (targetEl) {
            // 平滑滚动到目标锚点位置
            targetEl.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
            // 替换浏览器历史记录，移除地址栏哈希
            history.replaceState(null, null, window.location.pathname);
        }
    });
});

3. 保存设置后刷新页面测试，点击锚点链接时页面会正常滚动，地址栏将保持为tesaja.com。

针对性优化（可选） #

如果只想让特定按钮/菜单生效，给目标元素添加自定义类（比如custom-anchor），然后修改代码中的选择器：

document.querySelectorAll('a.custom-anchor[href^="#"]').forEach(anchor => {
    // 内部代码不变
});

方法二：单个元素添加点击事件 #

适合仅少数锚点链接需要修改的场景：

1. 在Elementor编辑器中选中目标按钮/菜单链接。
2. 打开「高级」选项卡，找到「自定义属性」，添加一组属性：
   • 键：onclick
   • 值：event.preventDefault(); document.getElementById('layanan').scrollIntoView({behavior:'smooth'}); history.replaceState(null,null,window.location.pathname); return false;
3. 替换值中的layanan为你的锚点ID，保存后即可生效。

注意事项 #

• 确保锚点目标元素（如Section）已设置正确的ID，与链接的href="#xxx"完全匹配。
• 若使用Elementor的「菜单锚点」组件，确认链接格式为纯哈希（#layanan）而非完整域名链接。

内容的提问来源于stack exchange，提问作者Herdi