的jQuery：自動滾動到頂部

我使用這個腳本打開一個模式：的jQuery：自動滾動到頂部

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

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

但是，當我在頁面的底部，並點擊鏈接，該模式在頁面的頂部打開。所以它看起來沒有任何事情發生，但我必須滾動到頂部才能看到打開的模式。

當模式打開時，是否可以自動將用戶發送到頂端？下面的代碼

來源

2013-09-30 Rick A.

豈不是更好的解決方案，以看到它的模式，在當前文件位置打開，而不是強迫的頁面，使得用戶不得不回到他們的位置向上滾動之前...？ – CBroe

是的，你是對的。但我不知道如何解決這個問題。但那也是一個選擇。 –

問題修復！請參閱：剛剛在此處添加CSS：http://jsfiddle.net/mondico/et47L/1/ 我將位置：絕對修改爲固定。這樣做的工作！謝謝！ –

你可以添加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-30 07:48:04 lort

我知道，但多數民衆贊成在問題。模態已經固定在頂部，但那不是我想要的。原因'當我在頁面的底部，我打開模式，它打開在頂部，我看不到它，除非我滾動到頁面的頂部。 –

「位置：固定」與「位置：絕對」相混淆。 – lort

使用移動到頁面的頂部：

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

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

來源

2013-09-30 07:38:38 Rajesh

謝謝U，我試過了，但我不知道在哪裏把它，或者怎麼樣，看我的例子： http://jsfiddle.net/mondico/et47L/ 這不是完整的，但我沒有說明我是如何把它放在jQuery .. 但我不明白如何去做。 –

問題解決了。看到我對我的startpost的評論。 –

好的人像魅力一樣工作 –

我會建議不滾動到頁面的頂部。這是不好的用戶體驗設計！我們可以在身體上隱藏溢出。所以，一旦彈出窗口進入屏幕，用戶不能滾動。我們需要給位置固定的彈出框的主要元素。

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

<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-30 08:09:10

謝謝你，我現在通過將CSS設置爲FIXED而不是ABSOLUTE來解決問題。這使得彈出窗口在用戶在那個時刻的文檔位置打開。 –

我很高興你找到了解決方案。我也喜歡動畫方法滾動到給定的頂部。確保停止（http://api.jquery.com/stop/）或出列（http://api.jquery.com/dequeue/）動畫以避免出錯的影響。 –

我通過在DOM節點上使用scrollIntoView來解決Chrome問題，想要滾動到頂部的容器頂部的項目，比如標題。 – Epirocks

的jQuery：自動滾動到頂部

回答

相關問題