Javascript 如何跳转到浏览器页面的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4147112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to jump to top of browser page
提问by Exitos
I'm writing a modal popup and I need the browser to jump to the top of the screen when the open modal button is pressed. Is there a way to scroll the browser to the top using jQuery?
我正在编写一个模态弹出窗口，当按下打开的模态按钮时，我需要浏览器跳到屏幕顶部。有没有办法使用 jQuery 将浏览器滚动到顶部？
回答by Nick Craver
You can set the scrollTop, like this:
您可以设置scrollTop，如下所示：
$('html,body').scrollTop(0);
Or if you want a little animation instead of a snap to the top:
或者，如果您想要一点动画而不是捕捉到顶部：
$('html, body').animate({ scrollTop: 0 }, 'fast');
回答by Ionu? Staicu
Without animation, you can use plain JS:
没有动画，你可以使用普通的 JS：
scroll(0,0)
With animation, check Nick's answer.
使用动画，检查尼克的答案。
回答by Silkster
If you're using jQuery UI dialog, you could just style the modal to appear with the position fixed in the window so it doesn't pop-up out of view, negating the need to scroll. Otherwise,
如果您使用的是 jQuery UI 对话框，您可以将模态设置为在窗口中固定位置显示，这样它就不会从视图中弹出，不需要滚动。除此以外，
var scrollTop = function() {
window.scrollTo(0, 0);
};
should do the trick.
应该做的伎俩。
回答by S.Kiers
You could do it without javascript and simply use anchor tags? Then it would be accessible to those js free.
您可以在没有 javascript 的情况下只使用锚标签吗？然后那些 js 就可以免费访问了。
although as you are using modals, I assume you don't care about being js free. ;)
尽管当您使用模态时，我认为您并不关心 js 是否免费。;)
回答by Waruna Manjula
// 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>回答by Josh Powlison
I know this is old, but for those having problems in Edge:
我知道这是旧的，但对于那些在 Edge 中遇到问题的人：
Plain JS: window.scrollTop=0;
普通JS： window.scrollTop=0;
Unfortunately, scroll()and scrollTo()throw errors in Edge.
遗憾的是，scroll()并scrollTo()在边缘抛出错误。
回答by gary
you're using jQuery UI dialog, you could just style the modal to appear with the position fixed in the window so it doesn't pop-up out of view, negating the need to scroll. Other
您正在使用 jQuery UI 对话框，您可以将模式设置为以固定在窗口中的位置显示，这样它就不会从视图中弹出，从而无需滚动。其他
