亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

不明覺厲了都。。。

<!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
提交
取消
回到頂部效果
  • 參與學習       44200    人
  • 解答問題       214    個

回到頂部網站不可缺少的一部分,用JS實現炫酷拉風的回到頂部效果

進入課程

不明覺厲了都。。。

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號