为了账号安全,请及时绑定邮箱和手机立即绑定

不明觉厉了都。。。

<!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" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Javascript 返回顶部</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.bg {
width: 1190px;
margin: 0 auto;
}

.top {
position: fixed;
right: 50px;
top: 80%;
}
.top{display: none;}
a {
width: 40px;
height: 40px;
overflow: hidden;
background-image: url(images/top_bg.png);
display: block;
}

a:hover {
background-position-y: -40px;
}
</style>

</head>

<body>
<div>
<a id="btn" title="回到顶部"></a>
</div>
<div>
<img src="images/tb_bg.jpg" />
</div>

</body>
<script src="new_file.js"></script>

</html>
(function() {
	var Mback = function() {
		var self = this;
		this.el = document.querySelector(".top");
		this.upclick = document.getElementById("btn");
		window.onscroll = function() {
			var scroT = document.documentElement.scrollTop || document.body.scrollTop;

			if(scroT >= 850) {
				self.el.style.display = 'block';
			} else {
				self.el.style.display = 'none';
			}
		}

		this.upclick.addEventListener('click', function() {
			console.log("回到顶部");
			self.backtop();
		});

		this.timer = null;

	};

	Mback.prototype.backtop = function() {
		clearInterval(this.timer);
		this.timer = setInterval(function() {
			this.h = document.documentElement.scrollTop || document.body.scrollTop;
			this.speed = Math.ceil(this.h / 5);
			if(document.documentElement.scrollTop || document.body.scrollTop> 0) {
				console.log(this.h - this.speed);
				document.documentElement.scrollTop = document.body.scrollTop = Math.floor(this.h - this.speed);
			} else {
				clearInterval(this.timer);
			}
		}, 50);

	}

	var mback = new Mback();
})();


正在回答

2 回答

想表达什么

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
回到顶部效果
  • 参与学习       44212    人
  • 解答问题       206    个

回到顶部网站不可缺少的一部分,用JS实现炫酷拉风的回到顶部效果

进入课程

不明觉厉了都。。。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信