div如何在頁面底部展開時自動滾動？

最近我已陷入死衚衕。我正在嘗試擴展頁腳（#footernotes），它的工作原理是它基本上是一個位於body的後面（用z-index完成），當你點擊一個按鈕時，它會向下移動。滾動條也與它一起使用，這意味着該頁面現在更長。div如何在頁面底部展開時自動滾動？

但我想要做的是使視口移動擴展的div。現在發生的事情是，當我按下按鈕（.secret）時div（#footernotes）進入，但它仍然在視口外，除非您手動滾動查看較長的頁面。

因此，到了一定程度，您如何在擴展頁面後自動將視口向下滾動？換句話說，你如何使視口停留在頁面的底部。

這裏是我的代碼：

<script> 
$(document).ready(function(){ 
    $('.secret').click(function(){ 
      $("#footernotes").animate({top: "100px"}, 1000); 
     return false; 
    }); 
}); 
</script> 

<div id="footer"> 
    <a href="" class="secret" ><div id="buttontest" style="width:50px; height:50px; background-color:green;"></div></a> 
    <div id="footernotes"> 
    </div> 
</div> <!-- end #footer -->

而對於#footernotes

的CSS

#footernotes { 
    background-color: red; 
    width: 100%; 
    position: relative; 
    top: -80px; 
    height: 150px; 
    z-index: -400; 
}

編輯：雖然打字我找出答案的問題，你必須使用scrollTop的。我已經添加在下面的示例行代碼：

<script> 
    $(document).ready(function(){ 
     $('.secret').click(function(){ 
       $("#footernotes").animate({top: "100px"}, 1000); 
       $('body,html').animate({scrollTop: "210px"},1000); 
      return false; 
     }); 
    }); 
    </script>

您仍然可以回答這個問題，如果你想有一個更好的辦法，我只是想我會離開這個問題的情況下，發佈其他人也有同樣的問題。

來源

2013-03-14 Banzboy

document.getElementById('divID').scrollIntoView();

試試看看是否能完成這項工作。

來源

2013-03-14 19:16:33 mavili

+1對於[Vanilla JS]（http://vanilla-js.com/）回答 – 2013-03-14 19:21:06

我不確定你的意思是那個@AaronBlenkush（？） – mavili 2013-03-14 19:22:35

另外，如果在' div'你滾動到，你可能想給這個方法一個'false'參數來對齊它與視圖的底部而不是頂部。看看這個：https：//developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView – mavili 2013-03-14 19:29:21

它可以使用jquery method .focus（）來完成。只需要添加

$（divname/.class/#id）.focus（）;

它將完成。

來源

2013-03-14 21:36:41 Vish

div如何在頁面底部展開時自動滾動？

回答

相關問題