文實例講述了jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法。分享給大家供大家參考，具體如下：

一、Js代碼：

onload=function () {

//初始化

scrollToLocation();

};

function scrollToLocation() {

var mainContainer=$('#thisMainPanel'),

scrollToContainer=mainContainer.find('.son-panel:last');//滾動到<div id="thisMainPanel">中類名為son-panel的最后一個div處

//scrollToContainer=mainContainer.find('.son-panel:eq(5)');//滾動到<div id="thisMainPanel">中類名為son-panel的第六個處

//非動畫效果

//mainContainer.scrollTop(

// scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()

//);

//動畫效果

mainContainer.animate({

scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()

}, 2000);//2秒滑動到指定位置

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

二、Html代碼：

<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">

<div class="son-panel">我是類容區(qū)域-1</div>

<div class="son-panel">我是類容區(qū)域-2</div>

<div class="son-panel">我是類容區(qū)域-3</div>

<div class="son-panel">我是類容區(qū)域-4</div>

<div class="son-panel" style="height:160px;">我是類容區(qū)域-5</div>

<div class="son-panel">我是類容區(qū)域-6</div>

<div class="son-panel">我是類容區(qū)域-7</div>

<div class="son-panel">我是類容區(qū)域-8</div>

</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

三. 相關知識

javascript中制作滾動代碼的常用屬性

1.網(wǎng)頁可見區(qū)域寬： document.body.clientWidth;

網(wǎng)頁可見區(qū)域高： document.body.clientHeight;

網(wǎng)頁可見區(qū)域寬： document.body.offsetWidth (包括邊線的寬);

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);

網(wǎng)頁正文全文寬： document.body.scrollWidth;

網(wǎng)頁正文全文高： document.body.scrollHeight;

網(wǎng)頁被卷去的高： document.body.scrollTop;

網(wǎng)頁被卷去的左： document.body.scrollLeft;

網(wǎng)頁正文部分上： window.screenTop;

網(wǎng)頁正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區(qū)高度： window.screen.availHeight;

2.假設 obj 為某個 HTML 控件。

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。

例如：

<div id=”tool”>

<input type=”button” value=”提交”>

<input type=”button” value=”重置”>

</div>

• 1
• 2
• 3
• 4

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。

“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

以上屬性在 FireFox 中也有效。

3.offsetTop 與 style.top 的區(qū)別

預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight

我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：

(1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。

(2)offsetTop 只讀，而 style.top 可讀寫。

(3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

offsetWidth與style.width屬性的區(qū)別在于：如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.scrollLeft :

對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離．

即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離．

scrollTop

對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離．

即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．

avascript中制作滾動代碼的常用屬性

1.網(wǎng)頁可見區(qū)域寬： document.body.clientWidth; 網(wǎng)頁可見區(qū)域高： document.body.clientHeight; 網(wǎng)頁可見區(qū)域寬： document.body.offsetWidth (包括邊線的寬); 網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬); 網(wǎng)頁正文全文寬： document.body.scrollWidth; 網(wǎng)頁正文全文高： document.body.scrollHeight; 網(wǎng)頁被卷去的高： document.body.scrollTop; 網(wǎng)頁被卷去的左： document.body.scrollLeft; 網(wǎng)頁正文部分上： window.screenTop; 網(wǎng)頁正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工作區(qū)高度： window.screen.availHeight;

2.假設 obj 為某個 HTML 控件。

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。 obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。 obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。 例如：

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。 “重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

以上屬性在 FireFox 中也有效。

3.offsetTop 與 style.top 的區(qū)別

預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight 我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：

(1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。 (2)offsetTop 只讀，而 style.top 可讀寫。 (3)如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。 offsetWidth與style.width屬性的區(qū)別在于：如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.scrollLeft : 對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離． 即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離． scrollTop 對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離． 即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．