快捷導(dǎo)航

js錨點(diǎn)、操作滾動(dòng)條滑動(dòng)scroll代碼演示

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

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

一、前提說明

錨點(diǎn)作用：在長文檔中常見，點(diǎn)擊錨點(diǎn)，讓頁面上下滑動(dòng)定位到某個(gè)想定位的位置，這個(gè)想定位的位置就被稱為錨點(diǎn)。

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

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

辦法：
a. <a>標(biāo)簽定義錨點(diǎn)；
b. element.documentElement.scrollTop = number，設(shè)置元素的滾動(dòng)距離使得頁面處于某個(gè)位置；
c. window.scrollTo({})，直接操作頁面滾動(dòng)；
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-滾動(dòng)條滑倒最頂端</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è)置了錨點(diǎn)，點(diǎn)擊a元素可以平滑的滾動(dòng)到對(duì)應(yīng)的href中
    // 例如：【超鏈接至下面??】點(diǎn)擊超鏈接，就會(huì)平滑的滑動(dòng)到【去上面??】button展示在可視區(qū)域的最頂端（由于頁面高度和滾動(dòng)條長度原因，只能展示在頁面底端）

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

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

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

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

    // 讓滾動(dòng)條回到最頂端??
    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>

三、gif動(dòng)圖演示

自己可cv代碼去瀏覽器演示，點(diǎn)擊回到最頂端，同理可得：

總結(jié)

到此這篇關(guān)于js錨點(diǎn)、操作滾動(dòng)條滑動(dòng)scroll的文章就介紹到這了,更多相關(guān)js錨點(diǎn)、操作滾動(dòng)條滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: