scrollTop()方法

scrollTop设置滚动条用法

前提

工作中需要做一个点击右侧网元或板卡，左侧topo图滚动到对应位置

用到的知识点

 scrollTop(),position()，工作环境中用了Jtopo,ZtreeMath.abs(value)  获取一个值的绝对值

scrollTop定义与用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
$(selector).scrollTop(offset) //offset可选

position定义与用法

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。
$(selector).position()

详解

下面是个人总结，如有不对请帮忙指出！

第一种情况：
① > 0 , 左侧topo树顶部仍在浏览器可视范围内：
③=②+①； //此时②=0

第二种情况：
① > 0 ,topo树顶部超出浏览器范围（此情况可与第一种合到一起写）：
此时② < 0, ③ = 1 + Math.abs(②)；

第三种情况：
① < 0,点击点在浏览器看不到的位置
此时③ =Math.abs( ② - ①)

源码：

//               根据topo图定位topo树let treeHeight = $("#right_topoTree ul").height();  //topo树高度var bheight = document.body.clientHeight;  //网页可视高度if(treeHeight > bheight*0.8){             //Topo树高度大于一定值时才进行定位,防抖const zTree = $.fn.zTree.getZTreeObj("topoTree");var sNodes = zTree.getSelectedNodes();if (sNodes.length > 0) {var tId = sNodes[0].tId;var offset =$("#"+tId).position(); const offsetTop = offset.top;   //当前选中节点距离顶部的高度，即 1 的高度var globalOffset = $("#topoTree_1_a").position();var globalOffsetTop = globalOffset.top;   //全局视图节点距离顶部的高度 即 2 的高度if(offsetTop >= 0){if(offsetTop - (bheight/2) >= 0){$("#right_Tree").scrollTop(offsetTop+Math.abs(globalOffsetTop));}}else{if(offsetTop<0){var scroll = globalOffsetTop-offsetTop;$("#right_Tree").scrollTop(Math.abs(scroll));}}}}

总结：
中间用了好久思考当点击点不在浏览器界面内，滚动条的位置怎么获取，是相对于谁获取的。
只要弄明白，滚动条的获取是相对于其顶部的，就简单多了，加油！

scrollTop()方法相关推荐

关于使用JQ scrollTop方法进行滚动定位
没图我说个锤子,先来个自拍镇楼. 又到了每周周五总结时间.我广州刘德华又来讲故事了.这一周没啥任务,就一个任务,产品口头交代了两句,也没有psd没有设计图没有样式.自由发挥,你自己敲代码做个作品出来. ...
jQuery的操作css的几种方法和位置，尺寸以及scrolltop方法
jQuery操作css jQuery可以通过css方法直接给指定元素查看,更改,添加css样式 <script>$(function () {//jQuery可以通过css方法直接给指定元 ...
深度理解Jquery 中 scrollTop() 方法
这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选 ...
scrollTop方法无效问题
遇到很奇怪的问题本来使用scrollTop方法在电脑上生效.在安卓手机上却没有生效. scrolltop和scrollTo 在安卓上都无效.本地浏览器上没问题. scrollTop参数详情结果用安卓 ...
JS中完美兼容各大浏览器的scrolltop方法
1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对 ...
js获取页面高度以及jquery获取页面滚动距离scrollTop方法
$(window).height(); //获取浏览器自身高度也就是你浏览器所能看到的页面的那部分的高度这个大小在你缩放浏览器窗口大小时会改变 $(document).height(); //获 ...
scrolltop 原生js_JS中完美兼容各大浏览器的scrolltop方法
1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : ...
关于scrollTop为0以及解决方法
一.当有DOCTYPE声明的时候, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView
测试内容样式: <style type="text/css">#container{overflow-y:auto; overflow-x:hidden; height ...

scrollTop()方法

scrollTop设置滚动条用法

前提

用到的知识点

详解

scrollTop()方法相关推荐

最新文章

热门文章