快捷導(dǎo)航

js錨點、操作滾動條滑動scroll代碼演示

更新時間：2024年03月27日 10:46:51 作者：小林.js

滑動錨點挺有意思的,可增加一些瀏覽性,下面這篇文章主要給大家介紹了關(guān)于js錨點、操作滾動條滑動scroll的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、前提說明

錨點作用：在長文檔中常見，點擊錨點，讓頁面上下滑動定位到某個想定位的位置，這個想定位的位置就被稱為錨點。

適用場景：長文檔。例如目錄（差不多這個意思，好理解），點擊對應(yīng)目錄，該目錄下面的內(nèi)容展示在文檔可視范圍。

目的：觸發(fā)點擊等事件時，頁面可視區(qū)域能夠展示我想看到的內(nèi)容，以下代碼就是為了解決這個問題??

辦法：
a. <a>標(biāo)簽定義錨點；
b. element.documentElement.scrollTop = number，設(shè)置元素的滾動距離使得頁面處于某個位置；
c. window.scrollTo({})，直接操作頁面滾動；
d. element.scrollIntoView({})，讓element展示在頁面可視區(qū)域。

二、代碼演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>043-滾動條滑倒最頂端</title>
  <style>
    * {
      scroll-behavior: smooth;
    }
    .box {
      background: rgb(171, 214, 200);
      width: 300px;
      height: 3000px;
    }
    .box1 {
      background: rgb(243, 161, 179);
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="box box1"></div>
    <a href="#btn-to-top" rel="external nofollow" >超鏈接至下面??</a>
    <button id="btn-to-bottom" type="button">去下面??</button>

    <div class="box"></div>
    
    <button id="btn-to-top" type="button">去上面??</button>
    <a href="#btn-to-bottom" rel="external nofollow" >超鏈接至上面??</a>
  </div>

  <script type="text/javascript">
    // 獲取元素
    const btnToBottom = document.getElementById('btn-to-bottom')
    const btnToTop = document.getElementById('btn-to-top')

    // 方式1：html頁面中的<a>元素已經(jīng)設(shè)置了錨點，點擊a元素可以平滑的滾動到對應(yīng)的href中
    // 例如：【超鏈接至下面??】點擊超鏈接，就會平滑的滑動到【去上面??】button展示在可視區(qū)域的最頂端（由于頁面高度和滾動條長度原因，只能展示在頁面底端）

    // 讓滾動條回到最底端??
    btnToBottom.addEventListener('click', function () {

      // 方式2：滾動到頁面最底端、配合上面的*css可以有動畫，否則無動畫
      document.documentElement.scrollTop = document.body.scrollHeight

      // 方式3：滾動到頁面最底端、有動畫
      // 'smooth'平滑滾動、'instant'瞬息、'auto'有css則按照css來（例如上面的*css樣式），否則就是instant
      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'auto',
      })

      // 方式4：讓btn2滾動到可視頁面最頂端、無動畫
      // 'smooth'平滑滾動、'instant'瞬息、'auto'有css則按照css來，否則就是instant
      // 'start'表示btn2展示在可視區(qū)域最頂端、'end'表示btn2展示在可是區(qū)域最底端
      btnToTop.scrollIntoView({ behavior: 'instant', block: 'end' }) 
    })

    // 讓滾動條回到最頂端??
    btnToTop.addEventListener('click', function () {
      // 方式2
      document.documentElement.scrollTop = 0
      // 方式3
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      })
      // 方式4
      btnToBottom.scrollIntoView({ behavior: 'instant', block: 'end' })
    })

  </script>
</body>

</html>