jQuery：自动滚动到顶部

Question

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? 打开模态时是否可以自动将用户发送到顶部？

Answer 1

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（以毫秒为单位），使其慢慢移动到顶部

Answer 2

You can add position: fixed and for example top: 30px to styles for #popup_bestanden_edit_name . 您可以添加position: fixed ，例如top: 30px到#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. 但是你必须要小心，因为如果模态高于视口，你将无法看到模态的剩余部分。

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;之前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();
}

Answer 3

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. 你也可以使用Rajesh给出的解决方案。 I would like to add a condition that if page is already animated then stop before doing new animation. 我想添加一个条件，如果页面已经设置了动画，则在执行新动画之前停止。

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.

jQuery：自动滚动到顶部

问题描述

3 个解决方案

解决方案1
11 2013-09-30 07:38:38

解决方案2
2 已采纳 2013-09-30 07:48:04

解决方案3
0 2013-09-30 08:09:10

jQuery：自动滚动到顶部

问题描述

3 个解决方案

解决方案1 11 2013-09-30 07:38:38

解决方案2 2 已采纳 2013-09-30 07:48:04

解决方案3 0 2013-09-30 08:09:10

解决方案1
11 2013-09-30 07:38:38

解决方案2
2 已采纳 2013-09-30 07:48:04

解决方案3
0 2013-09-30 08:09:10