元素跳到页面顶部(用于antd多层盒子嵌套用a锚点回到的是最外层页面的问题) 都可使用

最新推荐文章于 2024-06-12 16:39:33 发布

古道边.

最新推荐文章于 2024-06-12 16:39:33 发布

阅读量425

点赞数 2

文章标签： servlet html 前端

本文链接：https://blog.csdn.net/qq_61033782/article/details/126098316

版权

对于页面套用盒子过多内容过长想加一个锚点返回顶部的功能但是当你点击的时候发现最里面的盒子内容没有回去，回去的反而是最外层盒子这种现象此时建议用 scrollIntoView() 这个方法

scrollIntoView() 是将该元素返回到浏览器的可见区域的顶部正好处理了盒子嵌套过多的问题

他接受一个布尔值

true: 返回元素的顶部

false：返回底部

以下是使用方法demo

<!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>Document</title>
  <style>
    .box {
      width: 100%;
      height: 2000px;
      position: relative;
    }
    .btn {
      margin-top: 1000px;
    }
  </style>
</head>
<body>
  <div class="box">
    <button class="btn">回到顶部</button>
  </div>
  
</body>
<script>
  let btn = document.querySelector('.btn')
  btn.addEventListener('click', () => {
    btn.scrollIntoView(true)
  })
</script>
</html>