js滚动到指定位置

时间：2022-03-05 10:37:12

 

序言：在网络上百度，关键字：“js div滚动到指定位置”，结果基本上大同小异！各种大神都给我们总结出来了四种滚动到指定位置的办法，可惜再下愚钝，每个都不会用，所以写了一个超级简单的方法来使初学者一看就懂，我们可以用逻辑来代替一部分技术！这里我们只用到一个属性就可以达到要求，其他根据自己的逻辑判断即可！获取到你最外层的div的id，然后获取属性scrollTop，然后想好逻辑，给scrollTop赋值即可！

1、scrollTop用法

　　1-1 什么是scrollTop？

　　　　向上的滚动距离，或者说滚动出可视区域的距离

　　1-2 语法

// 获得滚动的像素数
var  intElemScrollTop = someElement.scrollTop;
// 设置滚动的距离
element.scrollTop = intValue;

　　1-3  scrollTop赋值

　　　　scrollTop赋值为负数的时候，scrollTop赋值为0；

　　　　如果一个元素不能滚动，scrollTop赋值为0；

　　　　如果设置超出了容器的可滚动值，scrollTop将会赋值为最大值；

　　1-4 可否通过设置scrollTop的值 来改变滚动的值，尝试中。。。。。。

　　　　尝试结果为：改变srcollTop并不会改变滚动条的位置！

　　　　再次尝试发现：改变整体的div的scrollTop可以改变滚动条的位置，上次尝试id值取错！

2、滚动的需求

　　2-1：点击按钮，使得div中滚动的内容列表中的某一条数据指定！（或者你看微信聊天中“微信”左下角的tabbar，你如果多次点击你就会发现，如下代码就是可以实现微信的这个功能！

　　　　可以使用scrollTop 这个属性来完成

　　　　前提条件：div中的每条数据的高度是一致的，也就是说每条数据都有一样的高度，这样都可以根据scrollTop = X * Y （X为列表中的那个索引，Y为数据宽度，例如：每条数据的宽度为100px，你想让第五条数据置顶，结果为：4 * 100 = scrollTop；这样，第五条数据就可以置顶了！

　　　　我真的不知道该怎么写下去了，我的开发环境里边有状态管理，可以管理一些状态来便利我的书写，并且都是必要的！

　　　　我就暂时写一些核心代码吧！有机会的话，录个屏幕会更清晰一些！

　　　　我写了一个最简单的逻辑供参考！可以建一个空html文件，然后代码全部复制，在浏览器中打开，即可实现！

　　　　

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="scrollBody" style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:scroll;height:300px;">
    <div style="font-size:20px;height:100px;">
      1
    </div>
    <div style="font-size:20px;height:100px;">
      2
    </div>
    <div style="font-size:20px;height:100px;">
      3
    </div>
    <div style="font-size:20px;height:100px;">
      4
    </div>
    <div style="font-size:20px;height:100px;">
      5
    </div>
  </div>
  <div style="position:relative;top:350px;">
    <button onClick="scrollToTop()">按钮1</button>
    <button>按钮2</button>
  </div>
  <script>
      function scrollToTop(){
        //   这里边可以写一些逻辑，比如偶数行一个一个的置顶，不如状态等于0的一个一个的置顶！
          document.getElementById('scrollBody').scrollTop = 200;
      }
  </script>
</body>

</html>

 

后续：这个代码为小白所写，没有自定义动画滚动效果！会更新！

　　

 

标签：

相关文章