不使用动画滚动到元素顶部

Question

如何在不使用animate()的情况下滚动到元素顶部？我用谷歌搜索了一下，但所有答案都是使用animate()。

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

我只想立即跳转到一个元素的顶部。在我的情况下，animate()不是必需的。

- Bekki

---

为什么不使用纯HTML（锚）？ - dpedoneze

Answer 1

使用 .scrollTop()

$("#button").click(function() {
  $('html, body').scrollTop( $("#elementtoScrollToID").offset().top);
});

.dummy {
  height: 1200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Test</button>
<div class="dummy"></div>
<div id="elementtoScrollToID">elementtoScrollToID</div>

- Arun P Johny

Answer 2

您可以只传递一个锚点，纯HTML即可实现：

<a href="#top">go to top</a>

在你的网站顶部添加一个<a name="top"></a>即可 :)

- dpedoneze

---

我看到了这个解决方案。但在我的情况下，我正在寻找一个与JavaScript / jQuery相关的答案。我已经打了这两个标签。 - Bekki

基本的DOM比JavaScript / jQuery更快...但是如果你想要速度，就选择Vanilla JS而不是jQuery。 - EasyBB

Answer 3

您可以使用Window.scroll()来实现相同的效果，而无需使用jQuery。

document.getElementById("button").onclick = function() {
    window.scroll(0,document.getElementById("elementtoScrollToID").offsetTop);
};

<button id="button">Button</button>

<div id="elementtoScrollToID" style="margin: 800px 0;">
  Scroll to here...
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- user4639281