基于Elementor的WordPress站点：为无哈希内部链接添加#hq实现自动滚动

方法一：服务器端PHP自动修改链接（推荐） #

直接在WordPress后台通过代码片段，自动给所有无哈希标记的内部链接加上#hq后缀，无需手动逐个修改链接。

1. 安装Code Snippets插件（避免修改主题functions.php导致代码随主题更新丢失）
2. 新增代码片段，粘贴以下代码：

// 修改文章/页面永久链接
function add_hq_suffix_to_internal_links($url, $post) {
    // 仅处理内部链接且无哈希标记的情况
    if (strpos($url, home_url()) === 0 && strpos($url, '#') === false) {
        $url .= '#hq';
    }
    return $url;
}
add_filter('post_link', 'add_hq_suffix_to_internal_links', 10, 2);
add_filter('page_link', 'add_hq_suffix_to_internal_links', 10, 2);

// 修改导航菜单链接
function add_hq_suffix_to_menu_links($items) {
    foreach ($items as $item) {
        // 检查为内部链接且无哈希标记
        if (strpos($item->url, home_url()) === 0 && strpos($item->url, '#') === false) {
            $item->url .= '#hq';
        }
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'add_hq_suffix_to_menu_links');

3. 激活代码片段，此后所有文章、页面的永久链接，以及导航菜单中的内部无哈希链接，都会自动追加#hq后缀。

方法二：前端JS处理（兼容动态加载内容） #

如果页面存在Elementor动态模块这类动态加载的内容，服务器端代码可能无法覆盖，可通过JS处理页面内所有链接：

1. 在Elementor自定义JS中添加代码（后台→Elementor→自定义代码→添加JS代码）：

document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a');
    const homeUrl = window.location.origin;

    links.forEach(link => {
        const href = link.getAttribute('href');
        // 跳过外部链接、已有哈希的链接、纯锚点链接
        if (!href || href.startsWith('#') || href.indexOf(homeUrl) !== 0 || href.includes('#')) {
            return;
        }
        // 追加#hq后缀
        link.setAttribute('href', href + '#hq');
    });

    // 页面加载时处理#hq锚点：无对应元素则滚动至页眉下方
    if (window.location.hash === '#hq') {
        const header = document.querySelector('header'); // 替换为你的页眉选择器，如.elementor-header
        if (header) {
            const headerHeight = header.offsetHeight;
            window.scrollTo({
                top: headerHeight,
                behavior: 'smooth' // 实现平滑滚动效果
            });
        }
    }
});

2. 设置触发条件：选择“整个网站”后发布即可。

锚点滚动补充说明 #

• 若已在页眉下方添加了<div id="hq"></div>这类锚点元素，浏览器会自动滚动到该位置，无需额外JS处理；
• 未设置锚点元素时，上述JS代码会自动获取页眉高度，滚动至菜单下方，避免内容被遮挡；
• 通过behavior: 'smooth'可实现类似page-scroll-to-id的平滑滚动效果，无需额外插件。

注意事项 #

• 测试前清空浏览器缓存，确保新链接生效；
• 若需排除特殊链接（如自定义帖子类型链接），可在PHP代码中添加额外判断逻辑；
• 已有哈希标记的链接（如带#repair-cost的）不会被修改，避免滚动冲突。

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