平滑滾動以錨定在同一頁面上

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.和我對拼寫錯誤表示歉意:-)

托姆