Question

我正在走出我的疯狂想法试图解决这个问题，相对而言是一个菜鸟，所以如果这非常简单，我会原谅我。

我有一个固定的标题，我已经弄清楚如何减去函数中标题的高度。当我在同一页面上时单击链接时，平滑滚动工作完美。当我从外部页面单击相同的链接时，它会加载但无法识别标题集。

实施例

<a href="mypage#link1"> clicked on http://mypage/ = correct results

<a href="mypage#link1"> clicked on http://mypage/other_page = incorrect results

jQuery(document).ready(function($) {

   $(function() {

   $('a[href*=#]:not([href=#])').click(function() {

   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

   var target = $(this.hash);

   target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

       if (target.length) {

         $('html,body').animate({
                  scrollTop: target.offset().top - 81
           }, 800);
       return false;
       }
     }

    });

  });

});

我确信我错过了一些东西，我认为if语句应该包含一个检查条件，然后处理它来自另一个页面的事实。这应该是这么简单，它踢我的但是!!!所以在这里的任何帮助将不胜感激。谢谢。

Answer 1

据我所知，你只是在该页面上的链接上捕获点击事件...当点击不同页面上的链接时，这将无效，因为目标页面上没有触发点击事件（并且原始页面完全无法控制目的地）......

所以你需要在页面加载时捕获哈希值（即直接在你的jQuery(document).ready()函数内）并在其中进行滚动动画。

此外，您可能需要阻止浏览器“自动”滚动到目标滚动点，然后才有机会进行动画制作 - 这可能就是您现在所看到的，因为这是AFAIK的默认行为自命名锚点出现以来的所有浏览器。

你可以采取以下两种方式：

使用命名锚之外的东西，浏览器本身无法识别...这意味着不支持你最终的任何东西的浏览器都不会优雅降级（即它们不会滚动到正确的点全部）
在页面加载时将滚动位置重置为（0,0），然后再进行动画制作。可能需要将此包装在setTimeout中，延迟时间为1毫秒，或者让它在浏览器中运行。

这适用于Firefox，也可能适用于其他浏览器：

jQuery(document).ready(function($) {
    $(function() {
        var target = $('[name=' + location.hash.slice(1) +']');
        if (target.length) {
            $('html,body').css({
                scrollTop: 0
            }).animate({
                scrollTop: target.offset().top - 81
            }, 800);
        }
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                            scrollTop: target.offset().top - 81
                    }, 800);
                    return false;
                }
            }
        });
    });
});

jQuery Smooth Scroll来自外部链接

1 个答案: