jquery如何讓滾動條默認在最底部？

使用如下代碼可讓滾動條默認在最底部：

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為石棉企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，石棉網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

$(document).ready(function(){

$("#submit").click(function(){

$("#info").append("admin:"+$("#talk").val()+"\n");

$("#info").scrollTop($("#info")[0].scrollHeight);

$("#talk").val("");

});

});

jQuery 里和滾動條有關(guān)的概念很多，但是有三個屬性和滾動條的拖動有關(guān)，就是：scrollTop、scrollLeft、scrollHeight。

1、可見高度：viewHeight,可以理解為打開見瀏覽器空白頁見到的空白區(qū)域的高度。

2、內(nèi)容高度：containHeight,這個就是我們關(guān)心的高度，它是內(nèi)容的總高度，包括隱藏在滾動條下面的內(nèi)容。

3、滾動的高度：scrollHeight,這個是滾動的高度，它是滾動條滾動了多少的意思。

代碼解說：

nScrollTop + nDivHight = nScrollHight。

程序中，在外部div的scroll（滾動）事件中偵測和執(zhí)行if判斷語句，是非常消耗CPU資源的。用鼠標(biāo)拖拉滾動條，只要有一個像素的變動就會觸發(fā)該事件。但點擊滾動條兩頭的箭頭，事件觸發(fā)的頻率會低得多。所以滾動條的scroll事件要謹(jǐn)慎使用。

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

使用jquery的scrollTop函數(shù)進行滾動控制:

舉個栗子:

!DOCTYPE?html

html?lang="en"

head

meta?charset="UTF-8"

meta?name="author"?content="sleest"

meta?name="description"?content="2017/08/07?jQuery?scrollTop?example"?/

titleDocument/title

/head

body

div?style="background:?#bdbdbd;height:400px;width:300px;overflow:auto;"?id="container"

div?id="content-1"?style="height:?200px;background-color:#03a9f4;color:#fff"Height.200px/div

div?id="content-2"?style="height:?300px;background-color:#ffc107;color:#fff"Height.300px/div

div?id="content-3"?style="height:?150px;background-color:#E91E63;color:#fff"Height.150px/div

/div

div?style="margin-top:20px"

labelPixel?Scroll:/label

input?type="number"?value="0"?id="scrollPixel"?step="50"?/

button?type="button"?id="btn-scroll-to"Scroll/button

/div

div?style="margin-top:20px"

labelElement?Scroll:/label

select?id="scrollElement"

option?value=""?selected--?choose?element?2?scorll/option

option?value="#content-1"Content1,?Height?200px/option

option?value="#content-2"Content2,?Height?300px/option

option?value="#content-3"Content3,?Height?150px/option

/select

/div

script?src=""/script

script?type="text/javascript"

+(function($)?{

var?$scrollPixel?=?$('#scrollPixel'),

$container?=?$('#container');

function?scrollPixel()?{

$container.scrollTop(+$scrollPixel.val());

}

function?scrollElement()?{

var?$t?=?$(this),

elId?=?$t.val();

if?(elId)?$container.scrollTop($(elId)[0].offsetTop?-?$container[0].offsetTop);

}

$(function()?{

$('#btn-scroll-to').bind('click',?scrollPixel)

$('#scrollElement').bind('change',?scrollElement)

})

})(jQuery);

/script

/body

/html

jquery獲取滾動條高度和位置

1、首先打開hbuilder編輯器，新建一個HTML文檔，里面輸入長篇的文字。

2、然后在上方引入jQuery的腳本，編輯js腳本，使用bind方法綁定瀏覽器的scroll事件，監(jiān)聽網(wǎng)頁滾動，之后用scrollTop()獲取垂直滾動距離，最后彈出輸出的值即可。

3、保存一下打開瀏覽器，可以看到一個長篇的文檔。

4、按F12打開瀏覽器開發(fā)者工具，切換到Console標(biāo)簽下，滾動鼠標(biāo)，就可以在開發(fā)者工具里顯示出瀏覽器高度位置的數(shù)據(jù)了。

jquery 如何設(shè)置 滾動條 位置

$("html,body").animate({scrollTop:$("#qy_name").offset().top},1000);//1000是ms,也可以用slow代替。

jquery可以通過animate方法來實現(xiàn)動畫。其用法：animate(params, [duration], [easing], [callback])

其中第一個參數(shù)是一組要實現(xiàn)動畫的最終css樣式。第二個參數(shù)是執(zhí)行動畫的時間，第三個參數(shù)是動畫的效果，需要插件的配合。最后一個參數(shù)是動畫執(zhí)行完成之后執(zhí)行的處理函數(shù)。而有些時候在實現(xiàn)動畫的時候需要自定義一些動畫處理，比如說文本的改變，多個DOM元素一起的動畫，采用上面的用法就不能實現(xiàn)了，不過jquery還提供了另外的一種用法：animate（params，｛duration：1000，easing："***",step:function(obj){*******},complete:[callback]}）

在step中就是動畫執(zhí)行每一步（每一幀）的時候?qū)?zhí)行的處理函數(shù)。這樣就可以實現(xiàn)自定義復(fù)雜的動畫效果。

標(biāo)簽屬性 屬性 描述

ALIGN align 設(shè)置或獲取表格排列。

ALLOWTRANSPARENCY allowTransparency 設(shè)置或獲取對象是否可為透明。

APPLICATION APPLICATION 表明對象的內(nèi)容是否為 HTML 應(yīng)用程序(HTA)，以便免除瀏覽器安全模式。

ATOMICSELECTION 指定元素及其內(nèi)容是否可以一不可見單位統(tǒng)一選擇。

BEGIN begin 設(shè)置或獲取時間線在該元素上播放前的延遲時間。

BORDER border 設(shè)置或獲取框架間的空間，包括 3D 邊框。

canHaveChildren 獲取表明對象是否可以包含子對象的值。

canHaveHTML 獲取表明對象是否可以包含豐富的 HTML 標(biāo)簽的值。

CLASS className 設(shè)置或獲取對象的類。

contentWindow 獲取指定的 frame 或 iframe 的 window 對象。

DATAFLD dataFld 設(shè)置或獲取由 dataSrc 屬性指定的綁定到指定對象的給定數(shù)據(jù)源的字段。

DATASRC dataSrc 設(shè)置或獲取用于數(shù)據(jù)綁定的數(shù)據(jù)源。

disabled 獲取表明用戶是否可與該對象交互的值。

END end 設(shè)置或獲取表明元素結(jié)束時間的值，或者元素設(shè)置為重復(fù)的簡單持續(xù)終止時間。

firstChild 獲取對象的 childNodes 集合的第一個子對象的引用。

FRAMEBORDER frameBorder 設(shè)置或獲取是否顯示框架的邊框。

hasMedia 獲取一個表明元素是否為 HTML+TIME 媒體元素的 Boolean 值。

HEIGHT height 設(shè)置或獲取對象的高度。

HIDEFOCUS hideFocus 設(shè)置或獲取表明對象是否顯式標(biāo)明焦點的值。

HSPACE hspace 設(shè)置或獲取對象的水平邊距。

ID id 獲取標(biāo)識對象的字符串。

innerText 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本。

isContentEditable 獲取表明用戶是否可編輯對象內(nèi)容的值。

isDisabled 獲取表明用戶是否可與該對象交互的值。

isMultiLine 獲取表明對象的內(nèi)容是包含一行還是多行的值。

isTextEdit 獲取是否可使用該對象創(chuàng)建一個 TextRange 對象。

LANG lang 設(shè)置或獲取要使用的語言。

LANGUAGE language 設(shè)置或獲取當(dāng)前腳本編寫用的語言。

lastChild 獲取該對象 childNodes 集合中最后一個子對象的引用。

longDesc 設(shè)置或獲取對象長描述的統(tǒng)一資源標(biāo)識符(URI)。

MARGINHEIGHT marginHeight 設(shè)置或獲取顯示框架中文本之前的上下邊距高度。

MARGINWIDTH marginWidth 設(shè)置或獲取顯示框架中文本之前的左右邊距寬度。NAME name 設(shè)置或獲取框架的名稱。

nextSibling 獲取對此對象的下一個兄弟對象的引用。

nodeName 獲取特定結(jié)點類型的名稱。

nodeType 獲取所需結(jié)點的類型。

nodeValue 設(shè)置或獲取結(jié)點的值。

offsetHeight 獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度。

offsetLeft 獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置。

offsetParent 獲取定義對象 offsetTop 和 offsetLeft 屬性的容器對象的引用。

offsetTop 獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置。

offsetWidth 獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度。

onOffBehavior 獲取表明指定的 Microsoft? DirectAnimation? 行為是否正在運行的對象。

outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式。

outerText 設(shè)置或獲取對象的文本。

ownerDocument 設(shè)置或獲取結(jié)點關(guān)聯(lián)的 document 對象。

parentElement 獲取對象層次中的父對象。

parentNode 獲取文檔層次中的父對象。

parentTextEdit 獲取文檔層次中可用于創(chuàng)建包含原始對象的 TextRange 的容器對象。

previousSibling 獲取對此對象的上一個兄弟對象的引用。

readyState 獲取對象的當(dāng)前狀態(tài)。

readyState 獲取表明對象當(dāng)前狀態(tài)的值。

recordNumber 獲取數(shù)據(jù)集中生成對象的原始記錄。

scopeName 獲取為該元素定義的命名空間。

SCROLLING scrolling 設(shè)置或獲取框架是否可被滾動。

SECURITY SECURITY 獲取表明 frame 或 iframe 的源文件是否應(yīng)用了特定的安全限制的值。

sourceIndex 獲取對象在源序中的依次位置，即對象出現(xiàn)在 document 的 all 集合中的順序。

SRC src 設(shè)置或獲取要由對象裝入的 URL。

STYLE 為該設(shè)置元素設(shè)置內(nèi)嵌樣式。

SYNCMASTER syncMaster 設(shè)置或獲取時間容器是否必須在此元素上同步回放。

SYSTEMBITRATE 獲取系統(tǒng)中大約可用帶寬的 bps。

SYSTEMCAPTION 表明是否要顯示文本來代替演示的的音頻部分。

SYSTEMLANGUAGE 表明是否在用戶計算機上的選項設(shè)置中選中了給定語言。

SYSTEMOVERDUBORSUBTITLE 指定針對那些正在觀看演示但對被播放的音頻所使用的語言并不熟悉的用戶來說是否要渲染配音或字幕。

TABINDEX tabIndex 設(shè)置或獲取定義對象的 Tab 順序的索引。

tagName 獲取對象的標(biāo)簽名稱。

tagUrn 設(shè)置或獲取在命名空間聲明中指定的統(tǒng)一資源名稱(URN)。

TIMECONTAINER timeContainer 設(shè)置或獲取與元素關(guān)聯(lián)的時間線類型。

TITLE title 設(shè)置或獲取對象的咨詢信息(工具提示)。

uniqueID 獲取為對象自動生成的唯一標(biāo)識符。

UNSELECTABLE 指定該元素不可被選中。

VSPACE vspace 設(shè)置或獲取對象的垂直邊距。

WIDTH width 設(shè)置或獲取對象的寬度。

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

本文實例講述了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秒滑動到指定位置

}

二、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擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

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

新聞標(biāo)題：jquery滑動條,jquery 滾動條
當(dāng)前鏈接：http://chinadenli.net/article45/dsgooei.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、App設(shè)計、服務(wù)器托管、標(biāo)簽優(yōu)化、全網(wǎng)營銷推廣、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)