Question

我使用一个函数进行平滑滚动，只要div位于我当前在页面上的点之下，它就可以正常工作。

如果我点击上面的另一个href则不会。相反，它会下降和下降。

这是我的代码：

$(".test").click(function() {
  $('html, body').animate({
    scrollTop: $(this.getAttribute("href")).offset().top
  }, 500);
});

<a href="#2">Go to 2</a>
<div id="1"> content </div>
<a href="#1">Go to 1</a>
<div id="2"> content </div><br>

请注意，即使我不使用js也不会有效，点击它时会在下面显示。<br>

这样的事情，认为通过点击“转到1”它将无法正常工作

Answer 1

我不确定您是如何连接HTML的，但您的示例代码并未在任何地方显示test类。

使用您的代码，将test类添加到链接并使用CSS为div设置一些高度，以确保滚动将立即开箱即用。

虽然动画与默认＆＃34; go-To＆＃34;同时执行，但有轻微的闪烁。功能，停止使用preventDefault()以确保只有动画移动页面。

以下似乎有效。

＆＃13;

$(".test").click(function(e) {
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $(this.getAttribute("href")).offset().top
  }, 500);
});

＆＃13;

div {
  height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test" href="#2">Go to 2</a>
<div id="1"> content of 1</div>
<a class="test" href="#1">Go to 1</a>
<div id="2">content of 2</div>

＆＃13;

href不会转到上面的div id

1 个答案: