JS-实现回到顶部（基础版）

最新推荐文章于 2023-12-27 15:54:11 发布

老衲的少女心i

最新推荐文章于 2023-12-27 15:54:11 发布

阅读量61

点赞数

分类专栏： javascript 前端文章标签： javascript js

本文链接：https://blog.csdn.net/qq_42592823/article/details/115301242

版权

前端同时被 2 个专栏收录

81 篇文章 1 订阅

订阅专栏

javascript

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<html lang="en">
	<head>
		
		<meta charset="UTF-8">
		<title>回到顶部基础版</title>
		<style>
			.box{
            width: 140px;
            height: 80px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            line-height: 80px;
            display: none;

            position: fixed;
            right: 0;
            bottom: 0;
            
			/*移动到那个位置,显示小手*/
			cursor: pointer;
        }

        .con{
            height: 3000px;
        }
		</style>
	</head>
	<body>
		<div class="box">
			回到顶部
		</div>
		<div class="con">
			hello<br>
			world<br>
		</div>
		<script>
			/*
			 当滚动条的距离没有大于200px的时候，box按钮显示
			 
			 onscroll是当滚动的时候，触发事件
			 */
			//获取元素
			var oBox=document.getElementsByClassName("box")[0];
			
			window.onscroll=function(){
//				console.log(1);
				//获取滚动条距离顶部的距离 
				
				//在IE9及以上、谷歌 、Safari、firefox，Opera(presto内核) 都支持 此语句window.pageYOffset 方法
				//那在IE低版本上怎么获取呢？
				//document.documentElement.scrollTop;
				
				//网页被卷去的高： document.body.scrollTop;
				
//				console.log((window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop))
				if((window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)>=200){
					oBox.style.display="block";
				}else{
					oBox.style.display="none";
				}
			}
			
			//点击box  直接让页面回到顶部  直接让滚轮变成0即可
			oBox.onclick=function(){
				window.scrollTo(0,0);
			}
		</script>
	</body>
</html>

老衲的少女心i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-实现回到顶部（基础版）

<!DOCTYPE html><html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到顶部基础版</title> <style> .box{ width: 140px; height: 80px; background-color: red;
复制链接

扫一扫