jQuery實現將div中滾動條滾動到指定位置的方法

本文實例講述了jQuery實現將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" stylex="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">

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

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

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

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

<div class="son-panel" stylex="height:160px;">我是類容區域-5</div>

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

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

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

</div>

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

三. 相關知識

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

1.網頁可見區域寬： document.body.clientWidth;

網頁可見區域高： document.body.clientHeight;

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

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

網頁正文全文寬： document.body.scrollWidth;

網頁正文全文高： document.body.scrollHeight;

網頁被捲去的高： document.body.scrollTop;

網頁被捲去的左： document.body.scrollLeft;

網頁正文部分上： window.screenTop;

網頁正文部分左： window.screenLeft;

屏幕解析度的高： window.screen.height;

屏幕解析度的寬： window.screen.width;

屏幕可用工作區高度： 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 的區別

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

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

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

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

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

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

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

4.scrollLeft :

對象的最左邊到對象在當前窗口顯示的範圍內的左邊的距離．

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

scrollTop

對象的最頂部到對象在當前窗口顯示的範圍內的頂邊的距離．

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！