js 简易的回到顶部。

最新推荐文章于 2021-09-13 09:31:51 发布

blue7wings

最新推荐文章于 2021-09-13 09:31:51 发布

阅读量580

点赞数

分类专栏： javascript&html 文章标签： js JS Js 回到顶部

本文链接：https://blog.csdn.net/blue7wings/article/details/8538640

版权

javascript&html 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

思路：通过scrollTop这个属性实现，当scollTop=0的时候就回到页面顶部。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部</title>
<style>
#po{
	width:1000px;
	height:2000px;
	background-color:#CCC;
	margin:auto;
	}
</style>
</head>

<body>
<div id="po">
</div>
<div id="gotop" style="position:fixed;top:500px;left:1200px;display:block;"><img src="gotop.png"/></div>

<script>
	var g=document.getElementById("gotop");
	var p=g.firstChild;
		g.οnmοusemοve=function(){
			p.src="gotop2.png";
			p.style.cursor="pointer";
			}
		g.οnmοuseοut=function(){
			p.src="gotop.png";
			}
		g.οnclick=function(){
		//IE请使用document.documentElement.scrollTop
		document.body.scrollTop=0;
	}
</script>

</body>
</html>

效果：

已知缺陷：①没实现到一定高度才出现回到顶部的按钮，这样按钮始终都是在页面上的。②没有那种过渡的感觉，别人的都是先快快到顶部就慢了下来，我不知道这是怎么实现的，╮(╯▽╰)╭。

一直缺陷解决了，哈哈很好解决的，来个回到顶部2.0：

①那种过渡的效果，也就是弹性的效果，例如：length=length/speed;然后循环调用这句，这样length的长度是减小的越来越快。这样就有动态的效果了。②到一定高度出现，也很简单实现，就是window中有个scroll状态。

代码：

// JavaScript Document
window.οnlοad=function(){
	var speed=1.1;
	var g=document.createElement("div");
	g.id="gotop";
	var p=document.createElement("img");
	p.src="img/gotop.png";
	document.body.appendChild(g);
	g.appendChild(p);
	
	
		g.οnmοusemοve=function(){
			p.src="img/gotop2.png";
			p.style.cursor="pointer";
			}
		g.οnmοuseοut=function(){
			p.src="img/gotop.png";
			}
		//让goto页面一加载就消失，当超过一定高度出现。
		p.style.display="none";
		//获取scrollTop的值,解决浏览器兼容性问题
		function getScrollTop(){
			var value=document.body.scrollTop||document.documentElement.scrollTop;
			return value;
		}
		//设置scrollTop的值
		function setScrollTop(value){
			document.body.scrollTop=value;
			document.documentElement.scrollTop=value;
			}
		//当滑动到500的时候就出现goTop	
		window.οnscrοll=function(){if(getScrollTop()>500){
			p.style.display="";
			}
			else{
			p.style.display="none";	
			}
			}
		g.οnclick=function(){
		var timer=setInterval(function(){
			setScrollTop(getScrollTop()/speed);
			if(getScrollTop()<1)
			clearInterval(timer);
			},10);
	}
}

效果：

很赞是吧，代码也很少。O(∩_∩)O哈哈~

blue7wings

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 简易的回到顶部。

思路：通过scrollTop这个属性实现，当scollTop=0的时候就回到页面顶部。代码：回到顶部#po{ width:1000px; height:2000px; background-color:#CCC; margin:auto; } var g=document.getElementById("gotop"); var p=g.fi
复制链接

扫一扫

专栏目录