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

Posted 2023-03-10

【中文标题】如何跳转到浏览器页面顶部

【英文标题】：How to jump to top of browser page

【发布时间】：2011-05-08 00:31:19

【问题描述】：

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

【参考方案1】：

你可以设置scrollTop，像这样：

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

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

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

【讨论】：

好一个...我之前使用 jQuery 的 scrollTo 插件来完成此操作 - 可以用您的代码保存一些代码...感谢您的课程 ;-)

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

如何为动画滚动添加持续时间？

【参考方案2】：

没有动画，你可以使用纯JS：

scroll(0,0)

有动画，检查Nick's answer。

【讨论】：

所有浏览器都支持这个吗？

scroll 在 CSSOM 标准中，而 scrollTo 最初是在 DOM Level 0 中定义的，而不是任何标准的一部分。但是，CSSOM 包含 scrollTo 以实现向后兼容性。

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

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

【参考方案3】：

您可以不使用 javascript 并简单地使用锚标记吗？那么这些js就可以免费访问了。

虽然您使用的是模态，但我认为您并不关心 js 是否免费。 ;)

【讨论】：

使用锚标签会中断基于哈希的导航。

【参考方案4】：

如果您使用的是 jQuery UI 对话框，您只需设置模态框的样式，使其位置固定在窗口中，这样它就不会弹出视图，无需滚动。否则，

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

应该可以解决问题。

【参考方案5】：

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

【参考方案6】：

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

【参考方案7】：

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

普通 JS：window.scrollTop=0;

很遗憾，scroll() 和 scrollTo() 在 Edge 中抛出错误。

【参考方案8】：

原版Javascript解决方案

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

如果你想要平滑滚动

theId.onclick = () => window.scrollTo( top: 0, behavior: 'smooth' )

【参考方案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)。