脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js滚动条滚动自动定位

js实现滚动条滚动到某个位置便自动定位某个tr

 更新时间：2021年01月20日 15:23:59   作者：沸羊羊一个  
这篇文章主要介绍了js实现滚动条滚动到某个位置便自动定位某个tr的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下

js代码

<strong><script type="text/javascript"> 
 function test(){ 
 var $objTr = $("#location"); //找到要定位的地方 tr 
 $objTr.css("background-color","lightgray"); //设置要定位地方的css 
 var objTr = $objTr[0]; //转化为dom对象 
 $("#dataDiv").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr 
 } 
</script></strong>

html

<body> 
 <h1>定位</h1> 
 <div id="dataDiv" style="overflow-x:hidden;overflow-y:auto;height:400px;width:450px;"> 
 <table id="tableId" style="width:400px;background-color:yellow" align="center" border="0"> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr <span style="color:#FF0000;">id="location"</span>><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
 </table> 
 </div> 
 <input type="button" value="定位到一行" onclick="test()"/> 
 </body>

效果图：

虽说是几行代码，但要彻底弄懂。要熟悉animate的使用，scrollTop，.offsetTop的意思方可得心应手。

1. animate的使用说明：

animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

2.  scrollTop

scrollTop属性
有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。

解释：

内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现竖直滑动条
初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。
当向下拖动滚动块时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出部分的高度。
当拖动滚动块到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，此时,超过“外层元素的上边界”的内容的高度=300px-200px=100px，也就是此时的scrollTop值。

3..offsetTop，offsetLeft等

假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

offsetParent

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位,则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回null。
句法：parentObj = element.offsetParent
变量：parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • ES6学习笔记之let与const用法实例分析

    ES6学习笔记之let与const用法实例分析

    这篇文章主要介绍了ES6学习笔记之let与const用法,结合实例形式分析了ES6中let与const的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2020-01-01
  • js图片下载方式集合(附详细代码)

    js图片下载方式集合(附详细代码)

    关于图片下载问题,不同的浏览器,需要兼容的下载方式,这篇文章主要给大家介绍了关于js图片下载方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 教你如何解密js/vbs/vbscript加密的编码异处理小结

    教你如何解密js/vbs/vbscript加密的编码异处理小结

    教你如何解密js/vbs/vbscript加密的编码异处理加密代码 是一篇非常不错的加密解密原理，希望大家仔细研究
    2008-06-06
  • 在js中实现邮箱格式的验证方法(推荐)

    在js中实现邮箱格式的验证方法(推荐)

    下面小编就为大家带来一篇在js中实现邮箱格式的验证方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript随机生成颜色的方法

    JavaScript随机生成颜色的方法

    这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错，代码简单易懂，具有参考借鉴价值，需要的朋友可以参考下
    2016-10-10
  • 中文字符串截取的js函数代码

    中文字符串截取的js函数代码

    有时在显示某段文字的时候，可能会太长，影响我们页面的显示效果。如果仅是英文，那么我们可以用String.substring(start, end)函数就已经够用了。但是通常我们都会遇到既有英文，又有汉字的情况。而汉字是占用2个字节的，如果用String.substring(start, end)截取字符串的话，会发现汉字截取后比英文截取后个数虽然相同，但是长度还是长出去不少（具体要视字符个数来决定）
    2013-04-04
  • JavaScript实现网络测速的方法详解

    JavaScript实现网络测速的方法详解

    在我们的日常生活中离不开网络，而网络的快慢直接决定了用户的产品使用体验。本文就来带大家了解如何用JavaScript实现网络测速，需要的可以参考一下
    2023-01-01
  • uniapp实现钉钉扫码登录示例代码

    uniapp实现钉钉扫码登录示例代码

    由于uniapp暂无钉钉授权登录所以本文将钉钉扫码登录作为网页嵌入uniapp，最终实现钉钉扫码登录app，本文通过实例代码给大家介绍uniapp钉钉扫码登录功能，感兴趣的朋友一起看看吧
    2021-12-12
  • 使用JavaScript实现实时搜索建议功能

    使用JavaScript实现实时搜索建议功能

    在我们的技术旅程中,JavaScript 无疑是一个不可或缺的伙伴,这篇文章主要为大家详细介绍了如何使用 JavaScript 来实现一个复杂功能,即实时搜索建议,感兴趣的可以了解下
    2024-02-02
  • 详解webpack自动生成html页面

    详解webpack自动生成html页面

    本篇文章主要介绍了详解webpack自动生成页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论