博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js滚动到指定位置
阅读量:5036 次
发布时间:2019-06-12

本文共 1394 字,大约阅读时间需要 4 分钟。

 

序言:在网络上百度,关键字:“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文件,然后代码全部复制,在浏览器中打开,即可实现!

    

  
Document
1
2
3
4
5

 

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

  

 

转载于:https://www.cnblogs.com/fooller/p/8124347.html

你可能感兴趣的文章
java 字符串转json,json转对象等等...
查看>>
极客前端部分题目收集【索引】
查看>>
第四天 selenium的安装及使用
查看>>
关于js的设计模式(简单工厂模式,构造函数模式,原型模式,混合模式,动态模式)...
查看>>
KMPnext数组循环节理解 HDU1358
查看>>
android调试debug快捷键
查看>>
【读书笔记】《HTTP权威指南》:Web Hosting
查看>>
Inoodb 存储引擎
查看>>
数据结构之查找算法总结笔记
查看>>
Linux内核OOM机制的详细分析
查看>>
Android TextView加上阴影效果
查看>>
Requests库的基本使用
查看>>
C#:System.Array简单使用
查看>>
C#inSSIDer强大的wifi无线热点信号扫描器源码
查看>>
「Foundation」集合
查看>>
算法时间复杂度
查看>>
二叉树的遍历 - 数据结构和算法46
查看>>
类模板 - C++快速入门45
查看>>
[转载]JDK的动态代理深入解析(Proxy,InvocationHandler)
查看>>
centos7 搭建vsftp服务器
查看>>