JavaScript-如何實現滾動頁面到指定位置？

lement.scrollIntoView()

直接上例子代碼給大家一點參考:

<html>
  <style>
    span {
      display: block;
      height: 150%;
    } /*整點上下的空白 */
  </style>
  <body>
    <button id="from">點擊我</button>
    <span></span>
    <div id="to">滾動到這:頭條@plzbefat</div>
    <span></span>
  </body>
  <script>
    document.getElementById("from").addEventListener("click", () => {
      document.getElementById("to").scrollIntoView({
        behavior: "smooth", //順滑的滾動
      });
    });
  </script>
</html>

整點例子沒毛病

語法

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 滾動 元素在頂部
element.scrollIntoView(false); // 滾動 元素在底部
element.scrollIntoView(option); //參數

參數

alignToTop:

如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。

先，要實現區域滾動的那個元素要設置css屬性：overflow: auto;

overflow: auto：如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。簡單的說，就是如果超出元素的部分會出現滾動條：

eg:

如果想出現橫向滾動條，則加上一行css樣式：

white-space: nowrap; 規定段落中的文本不進行換行：

嗯~~，既然滾動條出來啦，我們只需要修改滾動條的樣式不就可以了嗎？

說干就干！

::-webkit-scrollbar{} 設置滾動條整體部分

::-webkit-scrollbar-track{} 設置滾動條內部軌道

::-webkit-scrollbar-thumb{} 滾動條的滑塊按鈕

::-webkit-scrollbar-button 滾動條的上下兩端的按鈕

因為我們偽元素是和div綁定的，所有不會和其它滾動條沖突：

設置一個稍微好看點的：

用JavaScript實現頁面滑動到指定位置加載動畫。

若頁面滾動到class名為group-pic的元素的位置時開始加載

$(document).ready(function(){
var a,b,c;
a = $(window).height(); //瀏覽器窗口高度
var group = $(".group-pic");
$(window).scroll(function(){
b = $(this).scrollTop(); //頁面滾動的高度
c = group.offset().top; //元素距離文檔（document）頂部的高度
if(a+b>c){
...
}else{
...
}
});
});

原理： 1.獲取瀏覽器窗口的高度；

2.獲取頁面滾動的高度；

3.獲取頁面距離文檔（document）頂部的高度

offset().top具體指的是距哪里的高度呢？

一些獲寬高度的屬性：

網頁可見區域寬： document.body.clientWidth;

網頁可見區域高： document.body.clientHeight;

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);

網頁可見區域高： document.body.offsetHeight (包括邊線的寬);

網頁正文全文寬： document.body.scrollWidth;

網頁正文全文高： document.body.scrollHeight;

網頁被卷去的高： document.body.scrollTop;

網頁被卷去的左： document.body.scrollLeft;

網頁正文部分上： window.screenTop;

網頁正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區高度： window.screen.availHeight;

屏幕可用工作區寬度：window.screen.availWidth;

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

1.offsetTop : 當前對象到其上級層頂部的距離.

不能對其進行賦值.設置對象到頁面頂部的距離請用style.top屬性.

2.offsetLeft : 當前對象到其上級層左邊的距離.

不能對其進行賦值.設置對象到頁面左部的距離請用style.left屬性.

3.offsetWidth : 當前對象的寬度.

與style.width屬性的區別在于:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.offsetHeight : 與style.height屬性的區別在于:如對象的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值

在線咨詢

上一篇：關于html緩存的思考
下一篇：HTML教程，帶你輕松學會html超文本標記語言，web前端學習必備

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript-如何實現滾動頁面到指定位置？

lement.scrollIntoView()

語法

參數

您的項目需求