Question

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

Answer 1

您可以设置scrollTop，如下所示：

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

或者如果你想要一个小动画而不是一个快照到顶部：

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

Answer 2

没有动画，你可以使用普通的JS：

scroll(0,0)

使用动画，检查Nick's answer。

Answer 3

如果您正在使用jQuery UI对话框，您可以将模式设置为在窗口中固定的位置显示，这样它就不会弹出视图，从而无需滚动。否则，

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

应该这样做。

Answer 4

你可以在没有javascript的情况下使用锚点标签吗？那么那些js free就可以访问了。

虽然你正在使用模态，但我认为你并不关心js是否自由。 ;）

Answer 5

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

普通JS：window.scrollTop=0;

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

Answer 6

您正在使用jQuery UI对话框，您可以将模式设置为在窗口中固定的位置显示，这样它就不会弹出视图，从而无需滚动。其他

Answer 7

＆＃13;

// 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');
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

纯 JavaScript 解决方案

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

如果要平滑滚动

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

Answer 9

正如一些回复所暗示的那样，我不得不使用 window.scrollTo(0,0); 而不是 scrollTo(0,0);

window.scrollTo(0,0); 在所有经过测试的浏览器中使用纯 javascript（无动画）。 (MDN) (w3schools)。

来自 MDN 的示例：

没有选项：

window.scrollTo(0, 0);

使用选项：

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

这是一个使用 javascript 与 html 内联的简单示例：

<button onclick="window.scrollTo(0, 0);">Click to scroll to top</button>

平滑滚动：

<button onclick="window.scrollTo({top: 0, left: 0, behavior: 'smooth'});">Smooth scroll</button>

注意：
在没有首先启用的情况下，Chrome 中默认情况下似乎无法平滑滚动（例如在版本 89 中）
chrome://flags/#smooth-scrolling

window.scroll(0,0); 似乎与 window.scrollTo(0,0); 类似，但选项的兼容性较差。 (reference)。

如何跳转到浏览器页面的顶部

9 个答案: