JavaScript （滚动条的移动事件）

最新推荐文章于 2022-12-10 15:00:07 发布

HeartIsland

最新推荐文章于 2022-12-10 15:00:07 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： JS入门 JS基础 JavaScript html 移动

本文链接：https://blog.csdn.net/HeartIsland/article/details/47207111

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

JavaScript 语法：	object.style.position="absolute"

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>回到顶部</title>
		<style>
			* {	/*因为不同的浏览器所以产生的边距会不一样，这样是为了初始化*/
				margin: 0;
				padding : 0;
			}
			
			#tip {
				width: 100%;/*宽*/
				height: 50px;/*高*/
				background: gray;/*背景色*/
				position: fixed;/*绝对布局，相对于浏览器*/
				display: none;/*是否可见*/
			}		
				
			#placeholder {/*作用于定位，防止网站变形*/
				height: 50px;/*高*/
				display: none;/*是否可见*/
			}
				
			#header {
				width: 100%;/*宽*/
				height: 100px;/*高*/
				background: red;/*背景色*/	
			}	
						
			#container {
				width: 100%;/*宽*/
				height: 1200px;/*高*/
				background: green;/*背景色*/
			}	
			
			#goTop {
				position : fixed;/*绝对布局，相对于浏览器*/
				top : 80%;/*上边距*/
				left : 80%;/*左边距*/
				cursor: pointer;/*光标的形状：光标呈现为指示链接的指针（一只手）*/
				display: none;/*是否可见*/
			}
		</style>
	</head>
	<body>
		<div id="tip"></div>
		<div id="placeholder"></div>
		<div id="header"></div>
		<div id="container">
			<div id="goTop">
				回到顶部
			</div>
		</div>
		
		<script>
			var tipDOM = document.getElementById('tip');//获取<div id="tip">
			var placeholderDOM = document.getElementById('placeholder');//获取<div id="placeholder">
			var goTopDOM = document.getElementById('goTop');//获取<div id="goTop">
			window.onscroll = function() {//滚动条的滚动事件
				var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//获取滚动条滚动的移动的像素 存在兼容性问题
				if (scrollTop >= 200) {//当滚动条移动大于或等于200PX的时候
					tipDOM.style.display = 'block';//元素<div id="tip">显示
					placeholderDOM.style.display = 'block';//元素<div id="placeholder">显示
					goTopDOM.style.display = 'block';//元素<div id="goTop">显示
				} else {
					tipDOM.style.display = 'none';//元素<div id="tip">隐藏
					placeholderDOM.style.display = 'none';//元素<div id="placeholder">隐藏
					goTopDOM.style.display = 'none';//元素<div id="goTop">隐藏
				}
			}
			
			goTopDOM.onclick = function() {//当单机回到顶部后利用定时器实现缓慢上升
				// scrollBy(0, -100);
				var intervalId = setInterval(function () {//定时器
					scrollBy(0, -10);//滚动条的位置每次-10PX
					var scrollTop = document.body.scrollTop;//获取滚动条的所在位置
					if (scrollTop <= 0) {//当滚动条的位置小于或等于的时候 停止定时器
						clearInterval(intervalId);//停止定时器
					}
				}, 10)//定时器时间1000为一秒
			}
		</script>
	</body>
</html>

HeartIsland

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript （滚动条的移动事件）

JavaScript 语法：object.style.position="absolute"可能的值值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规
复制链接

扫一扫