js實(shí)現(xiàn)控制整個(gè)頁(yè)面滾動(dòng)條的位置

更新時(shí)間：2022年10月25日 15:58:59 作者：stefanie_sun723

這篇文章主要介紹了js實(shí)現(xiàn)控制整個(gè)頁(yè)面滾動(dòng)條的位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

js控制整個(gè)頁(yè)面滾動(dòng)條位置

方法一

1、通過div的scrollTop變動(dòng)控制垂直滾動(dòng)條位置。通過div的scrollLeft變動(dòng)控制水平滾動(dòng)條位置。

示例：

<body>
//d1是外層div，帶滾動(dòng)條
<div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'>
<div style='height:500px;width:500px;background:yellow'>2222</div>
</div>
</body>
<script>
document.getElementById('d1').scrollTop=100;//通過scrollTop設(shè)置滾動(dòng)到100位置
document.getElementById('d1').scrollLeft=200;//通過scrollTop設(shè)置滾動(dòng)到200位置
</script>

方法二

2、用html錨點(diǎn)

如下：

<a href="#test" rel="external nofollow" >aaaaa</a>
<div id="test">lalallalalalala</div>

js滾動(dòng)條屬性、設(shè)置滾動(dòng)條滾動(dòng)速度

返回不帶px的數(shù)值,沒用負(fù)數(shù),最小為0

.scrollTop：豎直滾動(dòng)條到頂部的距離,即瀏覽器視口外的高度
.scrollLeft：水平滾動(dòng)條到最左邊的距離
.scrollHeight：滾動(dòng)內(nèi)容區(qū)域的高度

返回整個(gè)窗口的滾動(dòng)條數(shù)值

非ie

返回整個(gè)窗口的滾動(dòng)條數(shù)值

document.documentElement.scrollTop：豎直滾動(dòng)條到頂部的距離
document.documentElement.scrollLeft：水平滾動(dòng)條到最左邊的距離

ie和非ie獲得滾動(dòng)條的兼容寫法

var temp=document.documentElement.scrollTop||document.body.scrollTop

設(shè)置滾動(dòng)條速度代碼示例

<html>
	<head>
		<meta charset="utf-8">
		<title>滾動(dòng)事件</title>
		<style>
			div{
				height:2000px;
				
			}
			button{
				position:fixed;
				bottom: 100px;
				right: 100px;
			}
		</style>
	</head>
	<body>
		<div>
		<button class="btn">去那里</button>
	
	
		</div>
		
		<script>
			var button=document.querySelector("button");
			
			button.onclick=function(){
				var id=setInterval(function(){
					if(document.documentElement.scrollTop>0)
					{
						document.documentElement.scrollTop-=100;
						
						//當(dāng)滑動(dòng)條距頂部為0時(shí),結(jié)束間隔任務(wù)
						if(document.documentElement.scrollTop==0)
						{
							clearInterval(id);
						}
					}
				},500);
				
			}
			
		</script>
	</body>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: