4

我使用这个脚本打开一个模式：

    <script type="text/javascript">
$(function(){
$('.compose').click(function() { 
    $('#popup_bestanden_edit_name').reveal({ 

        animation: 'fade',  
        animationspeed: 600,  
        closeonbackgroundclick: true,  
        dismissModalClass: 'close',
            });
    return false;
});
}); </script>

但是当我在页面底部并单击链接时，模式会在页面顶部打开。所以看起来什么都没有发生，但我必须滚动到顶部才能看到打开的模式。

打开模式时是否可以将用户自动发送到顶部？

4

3 回答 3

11

使用下面的代码移动到页面顶部：

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

除了 0，您还可以使用其他值，例如 500（以毫秒为单位），以使其缓慢移动到顶部

于 2013-09-30T07:38:38.903 回答
3

position: fixed例如，您可以将和 添加top: 30px到#popup_bestanden_edit_name. 如果这样做，无论用户在页面上的哪个位置，模态将始终出现在同一个位置。但是你必须小心，因为如果模态高于视口，你将无法看到模态的剩余部分。

如果你仍然想滚动到顶部（没有动画），你可以使用 JavaScript

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

就在你之前return false;

顺便说一句，如果您想防止触发链接的默认操作，最好这样做：

$('.compose').click(function(event) {
    // your code here
    event.preventDefault();
}
于 2013-09-30T07:48:04.100 回答
0

我建议不要滚动到页面顶部。这不是好的用户体验设计！我们可以在身体上隐藏溢出。因此，一旦弹出窗口出现在屏幕上，用户就无法滚动。我们需要将位置固定到弹出窗口的主要元素。

我建议检查下面的代码段。

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

但是，如果它不起作用，那么您可以将页面滚动到页面顶部。您也可以使用 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.
于 2013-09-30T08:09:10.503 回答