如何跳到浏览器页面顶部

186

我正在编写一个模式弹出窗口，当按下打开的模式按钮时，我需要浏览器跳到屏幕顶部。有没有一种使用jQuery将浏览器滚动到顶部的方法？

— Exitos
source

404

您可以这样设置scrollTop：

$('html,body').scrollTop(0);

或者，如果您想要一些动画而不是顶部动画：

$('html, body').animate({ scrollTop: 0 }, 'fast');

— 尼克Craver
source

1

好人...我之前使用过jQuery的scrollTo插件来完成此操作-可以在您的代码中节省一些代码...感谢您的教训；-)

— Zathrus Writer 2010年

@MikhailBatcer-禁用CSS，然后查看它是否有效。您可能对样式html和body标签的样式有疑问。否则$(window)改用。

— 调用

如何增加动画滚动的持续时间？

— Maxim Strutinskiy

139

如果没有动画，则可以使用普通的JS：

scroll(0,0)

使用动画检查尼克的答案。

— 爱奥努·斯塔库
source

4

所有浏览器都支持吗？

— Pacerier，2013年

1

scroll是CSSOM标准的，scrollTo最初是在DOM Level 0中定义的，不属于任何标准。但是，CSSOM包括scrollTo了向后兼容性。

— 克林特·帕切

3

我认为scroll得到了广泛的支持。参见stackoverflow.com/q/1925671/41906

— 克林特·帕奇

谢谢。我认为window && window.scroll(0,0);在我的视图模型中可以接受。

— nrodic

34

如果您使用的是jQuery UI对话框，则可以对模式进行样式设置，使其在窗口中固定的位置出现，从而不会弹出视图，从而消除了滚动的需要。除此以外，

var scrollTop = function() {
    window.scrollTo(0, 0);
};

应该可以。

— 丝斯特
source

13

您可以在没有javascript的情况下进行操作，而只需使用锚标记？然后，那些js免费用户将可以访问它。

尽管在使用模态时，我假设您并不在乎是否免费使用js。;）

— 基尔
source

1

使用定位标记会中断基于哈希的导航。

— Tom Landau

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

展开摘要

— 瓦鲁纳·曼朱拉（Waruna Manjula）
source

2

我知道这很旧，但是对于Edge中遇到问题的人：

普通JS： window.scrollTop=0;

不幸的是，scroll()并scrollTo()在Edge中引发错误。

— 乔什·鲍尔森（Josh Powlison）
source

1

如果您使用的是jQuery UI对话框，则可以对模式进行样式设置，使其在窗口中固定的位置出现，从而不会弹出视图，从而消除了滚动的需要。其他

— 加里
source

0

纯Javascript解决方案

theId.onclick = () => window.scrollTo(top: 0)

如果要平滑滚动

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— 莫加济
source