溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery如何修改滾動(dòng)條位置

發(fā)布時(shí)間：2022-05-24 08:15:07 來源：億速云 閱讀：582 作者：iii 欄目：web開發(fā)

這篇“jquery如何修改滾動(dòng)條位置”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jquery如何修改滾動(dòng)條位置”文章吧。

修改方法：1、用scrollLeft()，可設(shè)置水平滾動(dòng)條的位置，語法“$("滾動(dòng)條元素").scrollLeft(位置值)”；2、用scrollTop()，可設(shè)置垂直滾動(dòng)條位置，語法“$("滾動(dòng)條元素").scrollTop(位置值)”。

jquery如何修改滾動(dòng)條位置

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

jquery提供了兩種方法可直接修改滾動(dòng)條位置

  • scrollLeft()

  • scrollTop()

1、使用scrollLeft()

scrollLeft() 可以設(shè)置匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移，即水平滾動(dòng)條的位置。

滾動(dòng)條的水平位置指的是從其左側(cè)滾動(dòng)過的像素?cái)?shù)。當(dāng)滾動(dòng)條位于最左側(cè)時(shí)，位置是 0。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").scrollLeft(100);
				});
			});
		</script>
	</head>
	<body>

		<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
			The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
		</div><br>
		<button>水平滾動(dòng)條的位置設(shè)置為100 px</button>

	</body>
</html>

jquery如何修改滾動(dòng)條位置

2、使用scrollTop()

scrollTop()可設(shè)置匹配元素相對(duì)滾動(dòng)條頂部的偏移，即垂直滾動(dòng)條的位置。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").scrollTop(100);
				});
			});
		</script>
	</head>
	<body>

		<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
			This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text.
		</div><br>
		<button>垂直滾動(dòng)條的位置設(shè)置為100px</button>

	</body>
</html>

jquery如何修改滾動(dòng)條位置

以上就是關(guān)于“jquery如何修改滾動(dòng)條位置”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手