jquery - .animate 和 .offset 在 jQuery 脚本中不起作用

Question

我正在使用这个小 jQuery 脚本：

$(document).on('click', 'a[href^="#"]', function (event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top-128
  }, 500);
});

使用 jQuery v. 3.5.1。jQuery 可以正常工作，因为我还有其他工作脚本。控制台为空，没有错误。我的脚本应该动画滚动到从顶部偏移的锚点。这个脚本有什么问题？

标签： jquery

Answer 1

您正在尝试滚动到单击链接的父级。您必须href从单击的链接中获取 并滚动到具有该 ID 的元素。

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top-128
    }, 500);
});

你可以看到它在这里工作：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top-128
    }, 500);
});

.bigblock {height:500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="#div1">go to 1</a> <a href="#div2">go to 2</a> <a href="#div3">go to 3</a>
<div class="bigblock" id = "div1">Block 1</div>
<div class="bigblock" id = "div2">Block 2</div>
<div class="bigblock" id = "div3">Block 3</div>
</div>