JavaScript-如何實現(xiàn)滾動頁面到指定位置？

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); //參數(shù)

參數(shù)

alignToTop:

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

tml頁面設置動態(tài)金額滾動效果！

一開始加載頁面，數(shù)字都會過渡滾動到具體數(shù)字上！

代碼：

html:

css:

js:

用JavaScript實現(xiàn)頁面滑動到指定位置加載動畫。

若頁面滾動到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具體指的是距哪里的高度呢？

一些獲寬高度的屬性：

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;

網(wǎng)頁可見區(qū)域高： document.body.clientHeight;

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);

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

網(wǎng)頁正文全文寬： document.body.scrollWidth;

網(wǎng)頁正文全文高： document.body.scrollHeight;

網(wǎng)頁被卷去的高： document.body.scrollTop;

網(wǎng)頁被卷去的左： document.body.scrollLeft;

網(wǎng)頁正文部分上： window.screenTop;

網(wǎng)頁正文部分左： window.screenLeft;

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

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

屏幕可用工作區(qū)高度： window.screen.availHeight;

屏幕可用工作區(qū)寬度：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屬性的區(qū)別在于:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

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

在線咨詢

上一篇：前端常見面試題之display:none和visibility:hidden的區(qū)別
下一篇：趕緊收藏，頭條超詳細Web前端入門到精通必學的標簽及屬性大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

JavaScript-如何實現(xiàn)滾動頁面到指定位置？

lement.scrollIntoView()

語法

參數(shù)

您的項目需求