文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js实现控制整个页面滚动条的位置

2022-11-13 18:52

关注

js控制整个页面滚动条位置

方法一

1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。

示例:

<body>
//d1是外层div,带滚动条
<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设置滚动到100位置
document.getElementById('d1').scrollLeft=200;//通过scrollTop设置滚动到200位置
</script>

方法二

2、用html锚点

如下:

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

js滚动条属性、设置滚动条滚动速度

返回不带px的数值,没用负数,最小为0

返回整个窗口的滚动条数值

非ie        

返回整个窗口的滚动条数值

ie和非ie获得滚动条的兼容写法      

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

设置滚动条速度代码示例

<html>
	<head>
		<meta charset="utf-8">
		<title>滚动事件</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;
						
						//当滑动条距顶部为0时,结束间隔任务
						if(document.documentElement.scrollTop==0)
						{
							clearInterval(id);
						}
					}
				},500);
				
			}
			
		</script>
	</body>
</html>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯