本文實例講述了jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法。分享給大家供大家參考，具體如下：
一、Js代碼：
onload = function () {
//初始化
scrollToLocation();
};
function scrollToLocation() {
var mainContainer = $(‘#thisMainPanel’),
scrollToContainer = mainContainer.find(‘.son-panel:last’);//滾動到
//scrollToContainer = mainContainer.find(‘.son-panel:eq(5)’);//滾動到
//非動畫效果
//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代碼：
1
2
3
4
5
6
7
8
9
10
三. 相關(guān)知識
javascript中制作滾動代碼的常用屬性
1.網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高：
document.body.clientHeight;
網(wǎng)頁可見區(qū)域?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.假設(shè) obj 為某個 HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。
例如：
1
2
3
4
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。
以上屬性在 FireFox 中也有效。
3.offsetTop 與 style.top 的區(qū)別
預(yù)備知識：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ū)別在于：如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.scrollLeft :
對象的最左邊到對象在當前窗口顯示的范圍內(nèi)的左邊的距離.
即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離.
scrollTop
對象的最頂部到對象在當前窗口顯示的范圍內(nèi)的頂邊的距離.
即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離.
本文由網(wǎng)上采集發(fā)布，不代表我們立場，轉(zhuǎn)載聯(lián)系作者并注明出處：http://m.zltfw.cn/shbk/38625.html
相關(guān)推薦
-
小米主題美化（小米miui主題破解破解入門技能）
自MIUI9后，小米便加強了MIUI主題的保護策略，無論是收費或免費的主題，都禁止從瀏覽器下載主題包，主題下載途徑僅僅只有主題商店可選。但是主題商店...
-
稱為兩榜出身的是（兩榜出身是什么意思）
在科舉考試盛行的唐朝時期，進士會試分甲、乙兩科，即稱所謂的兩榜而到了清朝，會試即進士會試，鄉(xiāng)試即舉人試，分別為甲榜、乙榜，合稱兩榜 ，下面...
-
牂牁江怎么讀（牂牁江的拼音）
牂牁江讀作zāng kē jiāng牂牁江風(fēng)景區(qū)牂牁江景區(qū)位于貴州省六盤水市六枝特區(qū)西部，距離六枝特區(qū)中心區(qū)62公里，距六盤水市中心75公里沿水黃(水城到黃果...
-
史上最全五禽戲教學(xué)（最全專業(yè)五禽戲）
五禽戲 五禽戲是以肢體運動為主，輔以呼吸吐納與意念配合的導(dǎo)引類功法。它是模仿五種禽獸虎、鹿、熊、猿、鳥的動作而編創(chuàng)成的氣功功法。五禽戲歷史...
-
漢樂府民歌有哪些（漢代樂府民歌）
樂府是自秦代以來設(shè)立的配置樂曲、訓(xùn)練樂工和采集民歌的專門官署，漢樂府指由漢時樂府機關(guān)所采制的詩歌。這些詩，原本在民間流傳，經(jīng)由樂府保存下...
-
書寫高原戍邊的忠誠答卷（致敬戍邊英雄勇立時代新功）
你們牢記黨和人民賦予的使命，堅守在生命禁區(qū)，用青春和熱血守衛(wèi)著祖國的神圣領(lǐng)土，出色完成了擔負的任務(wù)大家都是好樣的在中秋佳節(jié)即將來臨之際，...
-
浙江李蘭娟院士最新研究成果（李蘭娟院士夫婦相愛45年
文|筆下有情 有人說：婚姻不是天堂，就是地獄。 婚姻的上半場，是紅花過殿堂;婚姻的下半場，是考驗赤子心。 在這場疫情中，婚姻幸福與否也成為了一...
-
兄弟四色激光打印機（功能全面還支持WiFi）
前言： 說起打印機，相信是很多單位、企業(yè)、甚至不少小伙伴家中必備產(chǎn)品。而打印機共享使用也越來越流行。簡單來說就是一個辦公室或者一個區(qū)域內(nèi)通...
-
不能忘卻的紀念原文魯迅（不能忘卻的紀念）
1937年12月12日下午伊始，已經(jīng)徹底喪失戰(zhàn)斗力的南京守軍接到上級命令開始全面撤退。緊接著在12月13日，盛極一時的南京城開始淪陷。由于提前沒有做好撤...
-
山西省合并了多少個縣（山西合并縣一覽表）
在山西省的東南部，有一個地方叫做長治縣，也就是現(xiàn)在的上黨區(qū)，它隸屬于長治市。長治縣地處于上黨盆地的南邊，西面和長子縣相連，東面和壺關(guān)縣相...
