平滑滚动以锚定在同一页面上

Question

叫我愚蠢，但我看不到。 我制作了一个Joomla页面，其中包含指向同一页面中各个部分的链接。 非常基本：先<a href="#sed">然后是<p id="sed"> 。 我包括这样的jQuery：

  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

它是Joomla 3的一部分。

我正在使用CSS-Tricks的脚本，将其放在页面的中：

    <script>
$(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
        }, 1000);
        return false;
      }
    }
  });
});
</script>

我摆弄了CSS Tricks示例页面 （将其复制/粘贴到我自己的HTML编辑器中，并更改了一些代码），是的，它可以工作，但是我无法在自己的页面上工作。 页面只是跳转到锚点，但不能平滑滚动。

提醒您：我几乎不懂JavaScript或jQuery，所以请耐心等待...对于jQuery专家来说，这一定是小菜一碟。

这是我制作的测试页： http : //test.tomhiemstra.nl 。

任何帮助表示赞赏。

干杯，

托姆

Answer 1

我不知道是什么原因造成的，但是在您的页面上， $未被识别。 将脚本中的所有$替换为jQuery 。

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

另外，将函数包装到将$映射到jQuery可能是一个更好的主意。

(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
                    }, 1000);
                    return false;
                }
            }
        });
    });
})(jQuery);

Answer 2

你可以试试这个吗

 $('a[href^="#"]').click(function(event) { event.preventDefault(); var target = $(this).attr("href").substring(1); if(target) { $('html,body').animate({ scrollTop: $('[name=' + target +']').offset().top }, 1000); } }); 

Answer 3

在上面的Talya S.的帮助下，这就是我想出的。 我希望我对所有括号和大括号等都做对了：

    <script>
   (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
                }, 1000);
                return false;
            }
        }
    });
});
})(jQuery);
</script>

我添加的括号过多还是太少？

但是，我仍然不明白为什么$未被识别为jQuery，这是您在jQuery中学习的最基本的知识之一（是的，我走到了这么远：-P）。 如果有人可以向我澄清，“就像我已经四岁了”。

再次感谢Talya S.和我对拼写错误表示歉意:-)

托姆