jQuery：自动滚动到顶部

Question

jQuery：自动滚动到顶部

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>

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

有没有可能在模态框打开时自动将用户带到页面顶部？

- Rick A.

难道让模态框在当前文档位置打开，而不是强制页面向上滚动，以便用户之后必须返回到之前的位置，这不是更好的解决方案吗？ - CBroe

是的，你说得对。但我不知道如何确切地修复它。但那也是一个选项。 - Rick A.

问题已解决！请查看：我在这里添加了CSS：http://jsfiddle.net/mondico/et47L/1/我将position: absolute更改为fixed。这就完成了！谢谢！ - Rick A.

3个回答

3

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

如果您仍想滚动到页面顶部（无动画效果），可以使用JavaScript编写：

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

在return false;之前，

顺便说一下，如果你想阻止链接的默认行为，最好这样做：

$('.compose').click(function(event) {
    // your code here
    event.preventDefault();
}

- lort

我知道，但这就是问题所在。模态框已经固定在顶部了，但这不是我想要的。因为当我在页面底部并打开模态框时，它会在顶部打开，除非我滚动到页面顶部，否则我看不到它。 - Rick A.

你把 position: fixed 和 position: absolute 搞混了。 - lort

0

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

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

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

- Gaurang Jadia

谢谢，我现在通过将CSS设置为“FIXED”而不是“ABSOLUTE”来解决了这个问题。这使得弹出窗口在用户此时所在的文档位置打开。 - Rick A.

我很高兴你找到了解决方案。我也喜欢使用animate方法滚动到指定的顶部。请确保停止（http://api.jquery.com/stop/）或取消排队（http://api.jquery.com/dequeue/）动画，以避免出现错误效果。 - Gaurang Jadia

我通过在DOM节点上使用scrollIntoView来解决Chrome的问题，对于要滚动到其顶部的容器中的顶部项目（例如标题），可以像这样操作。 - Epirocks

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rajesh · Accepted Answer

使用以下代码将页面移至顶部：

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

你可以将0替换为其他值，比如500（以毫秒为单位），以使其缓慢向顶部移动