从gallery.php跳转至index.php指定区块时平滑滚动失效求助

这个问题的核心原因很明确：当你从gallery.php跳转到index.php#service时，浏览器会先自动定位到锚点对应的区块，等页面完全加载后你的jQuery点击事件监听才生效，但这时候并没有触发点击行为，自然不会执行平滑滚动逻辑。

我们需要在index.php的jQuery代码里添加一段逻辑：页面加载完成后，主动检查URL中的hash值，如果存在且对应页面内的区块，就触发平滑滚动到目标位置。

修改后的完整代码如下：

$(document).ready(function(){
    // 保留原有页面内点击链接的平滑滚动逻辑
    $("a").on('click', function(event) {
        if (this.hash !== "") {
            event.preventDefault();
            var hash = this.hash;
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 800, function(){
                window.location.hash = hash;
            });
        }
    });

    // 新增：页面加载时检查URL中的hash，触发平滑滚动
    var urlHash = window.location.hash;
    if (urlHash !== "" && $(urlHash).length) {
        // 先重置滚动到顶部，再执行平滑滚动（覆盖浏览器默认锚点定位）
        $('html, body').scrollTop(0).animate({
            scrollTop: $(urlHash).offset().top
        }, 800);
    }
});

代码说明： #

1. 原有点击事件逻辑保留：确保index.php内部点击锚点链接依然能正常平滑滚动。
2. 页面加载时的hash检查：
   • 获取当前URL的hash值（比如#service）
   • 验证这个hash对应的页面元素是否存在（避免无效hash导致报错）
   • 先将页面滚动到顶部，再执行平滑滚动到目标区块，这样就能覆盖浏览器默认的锚点定位行为，实现从顶部平滑滚动到目标位置的效果。

你当前的链接写法（index.php#service）完全没问题，不需要修改，只需要把这段更新后的代码放到index.php中即可，这样无论是从页面内点击还是跨页面跳转，都能实现一致的平滑滚动体验。

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