jQuery Smooth Scroll来自外部链接

时间:2014-05-13 16:18:38

标签: jquery html css wordpress

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

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

实施例

<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语句应该包含一个检查条件,然后处理它来自另一个页面的事实。这应该是这么简单,它踢我的但是!!!所以在这里的任何帮助将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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