Question

我可以在不使用animate（）的情况下滚动到元素的顶部吗？我用Google搜索，但所有答案都是animate（）。

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

我只想立即转到元素的顶部。在我的例子中，animate（）不是必需的。

Answer 1

使用.scrollTop()

＆＃13;

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

＆＃13;

.dummy {
  height: 1200px;
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以只传递一个锚，纯HTML：

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

您只需在网站顶部添加<a name="top"></a>：）

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>

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

3 个答案: