jQuery：自動滾動到頂部

Question

我用這個腳本打開一個模態：

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

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

但是，當我在頁面底部並單擊鏈接時，模式將在頁面頂部打開。 所以看起來沒什么事情發生，但我必須滾動到頂部才能看到模態打開。

打開模態時是否可以自動將用戶發送到頂部？

Answer 1

使用下面的代碼移到頁面頂部：

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

而不是0，你可以有一些其他值，如500（以毫秒為單位），使其慢慢移動到頂部

Answer 2

您可以添加position: fixed ，例如top: 30px到#popup_bestanden_edit_name樣式。 如果這樣做，無論用戶在頁面上的哪個位置，模態都將始終顯示在同一位置。 但是你必須要小心，因為如果模態高於視口，你將無法看到模態的剩余部分。

如果您仍想滾動到頂部（沒有動畫），可以使用JavaScript

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

在您return false;之前return false;

順便說一句，如果你想防止鏈接的默認動作被觸發，那么這樣做是更好的做法：

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

Answer 3

我建議不要滾動到頁面頂部。 用戶體驗設計並不好！ 我們可以隱藏在身體上。 因此，一旦彈出窗口進入屏幕，用戶就無法滾動。 我們需要將位置固定到彈出窗口的主要元素。

我建議查看下面的代碼片段。

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

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