jQuery：自动滚动到顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19088641/
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
jQuery: Auto scroll to top
提问by Rick A.
i use this script to open a modal:
我使用这个脚本打开一个模态：
<script type="text/javascript">
$(function(){
$('.compose').click(function() {
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissModalClass: 'close',
});
return false;
});
}); </script>
But when i'm at the bottom of the page and click the link, the modal opens at the top of the page. So it looks like nothing happends, but i have to scroll to the top to see the modal opened.
但是当我在页面底部并单击链接时，模式会在页面顶部打开。所以看起来什么也没发生，但我必须滚动到顶部才能看到打开的模式。
Is it possible to send the user automatically to the top when the modal is opened?
模式打开时是否可以将用户自动发送到顶部？
采纳答案by lort
You can add position: fixedand for example top: 30pxto styles for #popup_bestanden_edit_name. If you do that, modal will appear always in the same place, no matter where the user is on the page. But then you must be careful, because if modal is higher than viewport, you won't be able to see the remaining part of modal.
position: fixed例如top: 30px，您可以添加和添加到#popup_bestanden_edit_name. 如果你这样做，模态将始终出现在同一个地方，无论用户在页面上的哪个位置。但是你必须小心，因为如果模态高于视口，你将无法看到模态的其余部分。
If you still want to scroll to top (without animation), using JavaScript you can put
如果你仍然想滚动到顶部（没有动画），你可以使用 JavaScript
$('body').scrollTop(0);
right before your return false;
就在你之前 return false;
BTW, if you want to prevent default action of a link to fire, it's a better practice to do it that way:
顺便说一句，如果您想防止链接触发的默认操作，最好这样做：
$('.compose').click(function(event) {
// your code here
event.preventDefault();
}
回答by Rajesh
use below code to move to top of page:
使用以下代码移至页面顶部：
$('html, body').animate({scrollTop: '0px'}, 0);
Instead of 0, you can have some other value like 500 (its in milliseconds) to make it move to top slowly
除了 0，您还可以使用其他一些值，例如 500（以毫秒为单位）以使其缓慢移动到顶部
回答by Gaurang Jadia
I would suggest not to scroll to the top of the page. It is not good UX Design! We can have overflow hidden on the body. So, user can not scroll once popup comes to screen. We need to give position fixed to the main element of the popup.
我建议不要滚动到页面顶部。这不是好的用户体验设计！我们可以将溢出隐藏在身体上。因此，一旦弹出窗口出现，用户就无法滚动。我们需要将位置固定到弹出窗口的主要元素。
I would suggest to check below snippet.
我建议检查以下代码段。
<html>
<head>
<title>Example</title>
<style type="text/css">
.nooverflow {overflow: hidden;}
.popup {position: fixed; z-index: 99;}
.cover {position: fixed; background: #000; opacity: .5; filter: alpha(opacity=50); top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.popup-conteiner {overflow-y: auto; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 101;}
.popup-block {position: relative; top: 100px; z-index: 101;}
</style>
</head>
<body>
<div id="popup">
<div class="cover"></div>
<div class="popup-conteiner">
<div class="popup-block">
<!-- POPUP's HTML GOES HERE -->
</div>
</div>
</div>
</body>
</html>
But, if it does not work then you can scroll page to the top of the page. You can use solution given by Rajesh as well. I would like to add a condition that if page is already animated then stop before doing new animation.
但是，如果它不起作用，那么您可以将页面滚动到页面顶部。您也可以使用 Rajesh 给出的解决方案。我想添加一个条件，如果页面已经动画，则在执行新动画之前停止。
var htmlBody = $("html,body"),
top = 0;
if (htmlBody.is(':animated')) {
htmlBody.stop(true, true); //Need to stop if it is already being animated
}
htmlBody.animate({ scrollTop: top }, 1000); //Scroll to the top of the page by animating for 1 sec.
