使用scrollTo滚动到文档中的某个坐标。

最新推荐文章于 2024-05-30 13:59:14 发布

Jinyon_

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量206

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63447884/article/details/125722478

版权

效果演示

语法

window.scrollTo(x-coord,y-coord ) 
// x-coord 是文档中的横轴坐标，y-coord 是文档中的纵轴坐标。

window.scrollTo(options)
// options 是一个包含三个属性的对象：
// top 等同于  y-coord
// left 等同于  x-coord
// behavior  类型 String，表示滚动行为，支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto

演示代码

<style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        padding: 20px;
      }
      ul {
        overflow-y: scroll;
        border: 1px solid black;
        width: 100px;
        height: 100px;
      }
      li {
        list-style: none;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <ul class="boxF">
      <li class="boxCh">
        1111111111111111111111111111111111111111111111111111111111111111111111
      </li>
      <li class="boxCh2">
        1234567890123456789012345678901234567890123456789012345678901234567890
      </li>
    </ul>
    <button class="btn">按钮</button>
    <script>
      const boxF = document.querySelector('.boxF')
      const boxCh = document.querySelector('.boxCh')
      document.querySelector('.btn').addEventListener('click', function () {
        const boxChCon = boxCh.scrollHeight // 获取第一个子元素的高度
        console.log(boxChCon) // 第一个子元素（boxCh）的高
        // 设置平滑滚动使视口滚动到第二个子元素的位置
        boxF.scrollTo({
          top: boxChCon,
          behavior: 'smooth'
        })
      })
    </script>
  </body>