如何通過JQuery將DIV的滾動條滾動到指定的位置

1、假設(shè)首先有一個div，內(nèi)容區(qū)域超出了這個div，出現(xiàn)了豎向滾動條

我們提供的服務(wù)有：網(wǎng)站制作、網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、建陽ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的建陽網(wǎng)站制作公司

2、$('div').scrollTop(number);//用jquery的scrollTop方法，傳入的參數(shù)是你想設(shè)置的滾動條滾動的距離，也就是滾動條距離頂部的距離，就可以了。

3、如果是想有動畫，那可以用jquery的animate函數(shù)，設(shè)置scrollTop屬性，設(shè)置時間就好了

jQuery實(shí)現(xiàn)將div中滾動條滾動到指定位置的方法

本文實(shí)例講述了jQuery實(shí)現(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秒滑動到指定位置

}

二、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

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery

form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

jquery獲取滾動條高度和位置

1、jquery獲取滾動條高度使用.scrollTop()方法。

2、首先我們新建一個長篇的HTML文檔。

3、然后我們編輯JS腳本，使用.scroll()方法，監(jiān)聽網(wǎng)頁滾動。

4、然后我們使用.scrollTop()獲取垂直滾動距離。

5、然后保存文件，查看獲取的垂直滾動距離即可。

jquery怎么設(shè)置滾動條的位置

offset():

獲取匹配元素在當(dāng)前視口的相對偏移。

返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。

.offset()方法可以讓我們重新設(shè)置元素的位置。這個元素的位置是相對于document對象的。如果對象原先的position樣式屬性是 static的話，會被改成relative來實(shí)現(xiàn)重定位。

position():

獲取匹配元素相對父元素的偏移。

返回的對象包含兩個整形屬性：top 和 left。為精確計算結(jié)果，請在補(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。

/ Get *real* offsetParent

var offsetParent = this.offsetParent(),

// Get correct offsets

offset = this.offset(),

parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();

// Subtract element margins

// note: when an element has margin: auto the offsetLeft and marginLeft

// are the same in Safari causing offset.left to incorrectly be 0

offset.top -= num( this, ’marginTop’ );

offset.left -= num( this, ’marginLeft’ );

// Add offsetParent borders

parentOffset.top += num( offsetParent, ’borderTopWidth’ );

parentOffset.left += num( offsetParent, ’borderLeftWidth’ );

// Subtract the two offsets

results = {

top: offset.top - parentOffset.top,

left: offset.left - parentOffset.left

};使用position()方法時事實(shí)上是把該元素當(dāng)絕對定位來處理，獲取的是該元素相當(dāng)于最近的一個擁有絕對或者相對定位的父元素的偏移位置。

使用position()方法時如果其所有的父元素都為默認(rèn)定位（static）方式，則其處理方式和offset()一樣，是當(dāng)前窗口的相對偏移

使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對于當(dāng)前視口的偏移

如何讓jquery動畫效果在屏幕滾動到指定位置才執(zhí)行

1、新建一個html文件，命名為test.html。

2、在test.html文件內(nèi)，使用div標(biāo)簽創(chuàng)建一個模塊，并設(shè)置其id為mycss。

3、在css標(biāo)簽內(nèi)，定義div的樣式，設(shè)置其寬度為100px，高度為2000px，背景顏色為粉紅色。

4、在js標(biāo)簽內(nèi)，使用scroll()方法監(jiān)聽頁面的滾動條，并執(zhí)行function方法。

5、在function方法內(nèi)，使用if語句判斷，當(dāng)前滾動的位置（scrollTop()）是否到達(dá)頁面的底部（$(document).height()-$(window).height()），如果到達(dá)頁面底部，提示“已經(jīng)到底部了”。