scrollIntoView(ture)元素上邊框與視窗頂部齊平
scrollIntoView(false)元素下邊框與視窗底部齊平
<html> <head> <title>HTML5_ScrollInToView方法</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function(){ /* 如果滾動頁面也是DOM沒有解決的一個問題。為了解決這個問題，瀏覽器實現了一下方法， 以方便開發人員如何更好的控制頁面的滾動。在各種專有方法中，HTML5選擇了scrollIntoView() 作為標准方法。 scrollIntoView()可以在所有的HTML元素上調用，通過滾動瀏覽器窗口或某個容器元素， 調用元素就可以出現在視窗中。如果給該方法傳入true作為參數，或者不傳入任何參數，那么 窗口滾動之后會讓調動元素頂部和視窗頂部盡可能齊平。如果傳入false作為參數，調用元素 會盡可能全部出現在視口中（可能的話，調用元素的底部會與視口的頂部齊平。）不過頂部 不一定齊平，例如： //讓元素可見 document.forms[0].scrollIntoView(); 當頁面發生變化時，一般會用這個方法來吸引用戶注意力。實際上，為某個元素設置焦點也 會導致瀏覽器滾動顯示獲得焦點的元素。 支持該方法的瀏覽器有 IE、Firefox、Safari和Opera。 */ document.querySelector("#roll1").onclick = function(){ document.querySelector("#roll_top").scrollIntoView(false); } document.querySelector("#roll2").onclick = function(){ document.querySelector("#roll_top").scrollIntoView(true); } } </script> <style type="text/css"> #myDiv{ height:900px; background-color:gray; } #roll_top{ height:900px; background-color:green; color:#FFF; font-size:50px; position:relative; } #bottom{ position:absolute; display:block; left:0;bottom:0; } </style> </head> <body> <button id="roll1">scrollIntoView(false)</button> <button id="roll2">scrollIntoView(true)</button> <div id="myDiv"></div> <div id="roll_top"> scrollIntoView(ture)元素上邊框與視窗頂部齊平 <span id="bottom">scrollIntoView(false)元素下邊框與視窗底部齊平</span> </div> </body> </html>