JS锚点跳转与滚动条滑动scroll方法代码演示

本文详细解析在长文档中利用JavaScript控制页面滚动的多种方案。涵盖通过HTML标签定义锚点，以及使用element.documentElement.scrollTop、window.scrollTo和element.scrollIntoView等API实现平滑或即时滚动定位，帮助开发者解决页面可视区域内容展示问题。

一、前提说明

锚点的主要作用是在长文档中实现快速定位。当用户点击锚点时，页面会自动上下滑动，将目标位置展示在可视区域内，该目标位置即被称为锚点。

此功能主要适用于长文档场景，类似于目录导航的效果。点击对应的目录项，即可使该目录下方的内容显示在文档的可视范围内，便于用户理解和使用。

核心目的是在触发点击等事件时，确保页面可视区域能够展示用户希望查看的内容。以下代码旨在解决这一问题。

具体实现方法包括： a. 使用 <a> 标签来定义锚点； b. 通过设置 element.documentElement.scrollTop = number 来指定元素的滚动距离，从而将页面定位到特定位置； c. 调用 window.scrollTo({}) 直接操作页面的滚动行为； d. 使用 element.scrollIntoView({}) 使指定元素展示在页面可视区域。

二、代码演示

<!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>元素已经设置了锚点，点击a元素可以平滑的滚动到对应的href中
    // 例如：【超链接至下面👇】点击超链接，就会平滑的滑动到【去上面👆】button展示在可视区域的最顶端（由于页面高度和滚动条长度原因，只能展示在页面底端）

    // 让滚动条回到最底端👇
    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展示在可视区域最顶端、'end'表示btn2展示在可是区域最底端
      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>

JavaScript 实现页面锚点定位与滚动条控制详解

一、前提说明

二、代码演示

三、gif动图演示

总结

实用工具推荐