js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到某個(gè)位置便自動(dòng)定位某個(gè)tr
要實(shí)現(xiàn)帶滾動(dòng)條的table，定位到某個(gè)tr，其實(shí)是很簡(jiǎn)單的，只有幾行js代碼就可以完成，具體內(nèi)容如下
js代碼
<strong><script type="text/javascript">
function test(){
var $objTr = $("#location"); //找到要定位的地方 tr
$objTr.css("background-color","lightgray"); //設(shè)置要定位地方的css
var objTr = $objTr[0]; //轉(zhuǎn)化為dom對(duì)象
$("#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>
效果圖：
雖說(shuō)是幾行代碼，但要徹底弄懂。要熟悉animate的使用，scrollTop，.offsetTop的意思方可得心應(yīng)手。
1. animate的使用說(shuō)明：
animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫(huà)。
該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫(huà)效果。
只有數(shù)字值可創(chuàng)建動(dòng)畫(huà)（比如 "margin:30px"）。字符串值無(wú)法創(chuàng)建動(dòng)畫(huà)（比如 "background-color:red"）。
2. scrollTop
scrollTop屬性
有些情況下,“元素中內(nèi)容”的高度會(huì)超過(guò)“元素本身”的高度, scrollTop指的是“元素中的內(nèi)容”超出“元素上邊界”的那部分的高度。
解釋：
內(nèi)層元素的高度值300px > 外層元素的高度值200px,因此“外層元素的內(nèi)容”(也就是“內(nèi)層元素”)無(wú)法完全顯示，而外層元素把overflow設(shè)置為auto，因此外層元素的右側(cè)會(huì)出現(xiàn)豎直滑動(dòng)條
初始狀態(tài)下，“內(nèi)層元素的上邊界”和“外層元素的上邊界”重合，沒(méi)有任何內(nèi)容超過(guò)“外層元素的上邊界”，此時(shí)scrollTop屬性的值為0。
當(dāng)向下拖動(dòng)滾動(dòng)塊時(shí)，超過(guò)“外層元素的上邊界”的內(nèi)容會(huì)逐漸增多，scrollTop值就等于這些超出部分的高度。
當(dāng)拖動(dòng)滾動(dòng)塊到最底部時(shí)，“內(nèi)層元素的下邊界”和“外層元素的下邊界”重合，此時(shí),超過(guò)“外層元素的上邊界”的內(nèi)容的高度=300px-200px=100px，也就是此時(shí)的scrollTop值。
3..offsetTop，offsetLeft等
假設(shè) obj 為某個(gè) HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
offsetParent
offsetParent屬性返回一個(gè)對(duì)象的引用，這個(gè)對(duì)象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進(jìn)行過(guò)CSS定位的容器元素。 如果這個(gè)容器元素未進(jìn)行CSS定位,則offsetParent屬性的取值為根元素(在標(biāo)準(zhǔn)兼容模式下為html元素；在怪異呈現(xiàn)模式下為body元素)的引用。當(dāng)容器元素的style.display 被設(shè)置為 "none"時(shí)（譯注：IE和Opera除外），offsetParent屬性 返回null。
句法：parentObj = element.offsetParent
變量：parentObj 是一個(gè)元素的引用，當(dāng)前元素的偏移量在其中計(jì)算。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
bootstrap table動(dòng)態(tài)加載數(shù)據(jù)示例代碼
本篇文章主要介紹了bootstrap table動(dòng)態(tài)加載數(shù)據(jù)示例代碼，可以實(shí)現(xiàn)點(diǎn)擊選擇按鈕，彈出模態(tài)框，加載出關(guān)鍵詞列表，有興趣的可以了解一下。2017-03-03
JS實(shí)現(xiàn)transform實(shí)現(xiàn)扇子效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)transform實(shí)現(xiàn)扇子效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
用js怎么把&字符換成"&:"...2006-10-10
js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content)
這篇文章主要介紹了js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content),需要的朋友可以參考下2020-05-05
uniapp使用第三方UI庫(kù)uview-plus的方法
uview-plus是uni-app全面兼容nvue的uni-app生態(tài)框架,全面的組件和便捷的工具會(huì)讓您信手拈來(lái),下面這篇文章主要給大家介紹了關(guān)于uniapp使用第三方UI庫(kù)uview-plus的方法,需要的朋友可以參考下2023-04-04
js格式化貨幣數(shù)據(jù)實(shí)現(xiàn)代碼
貨幣數(shù)據(jù)想要一某種形式在頁(yè)面中顯示的話，首先是必須要格式化的，下面為大家介紹下具體的格式化代碼，感興趣的朋友可以參考下2013-09-09
微信小程序登錄時(shí)如何獲取input框中的內(nèi)容
這篇文章主要介紹了微信小程序登錄時(shí)如何獲取input框中的內(nèi)容,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了理解JavaScript單一職責(zé)原則，單一職責(zé)原則（SRP：Single?responsibility?principle）又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則（SOLID）之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-08-08
Javascript獲取頁(yè)面元素的絕對(duì)位置實(shí)現(xiàn)
這篇文章主要為大家介紹了Javascript獲取頁(yè)面元素的絕對(duì)位置實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11