zoukankan      html  css  js  c++  java
  • js滚动到指定位置

     

    序言:在网络上百度,关键字:“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>

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

      

  • 相关阅读:
    函数封装总结
    03.深入javascript
    02.JavaScript基础下
    html5权威指南:客户端分区响应图
    html5权威指南:定制input元素
    html5权威指南:表单元素
    html5权威指南:表格元素
    html5权威指南:组织内容、文档分节
    css布局理解
    html5权威指南:标记文字
  • 原文地址:https://www.cnblogs.com/fooller/p/8124347.html
Copyright © 2011-2022 走看看