課程
/前端開發
/HTML/CSS
/回到頂部效果
請問誰有這頁面回到頂部的完整代碼呢， 有過程解釋的最好，謝謝了
2018-07-20
源自：回到頂部效果 4-4
正在回答
這是我自己寫的JS執行代碼 跟課程講的稍有差別?
哈爾波兒 提問者
<!DOCTYPE html>
<html>
<head>
? ? <title>Javascript 回到頂部效果</title>
<style>
#btn {
width:40px;
height:40px;
position:fixed;
left:50%;?
display:none;
margin-left:610px;
bottom:30px;?
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat left top;
}
#btn:hover {
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat 0 -39px;
.box {
width:1190px;?
margin:0 auto;?
</style>
<script>
window.onload = function () {
//設置所需變量
var oBtn = document.getElementById('btn');
var scrollTop = 0;
var timer = null;
//滾動時按鈕的顯示與隱藏
window.onscroll = function () {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可視區高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(scrollTop >= clientHeight) {
oBtn.style.display = 'block';
else {
oBtn.style.display = 'none';
};
//點擊回到頂部
oBtn.onclick = function () {
//設置定時器
timer = setInterval(function () {
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//定義緩沖速度
var iSpeed = scrollTop/5;
//頂部關閉定時器
if (scrollTop == 0) {
clearInterval(timer);
document.documentElement.scrollTop = document.body.scrollTop = Math.floor(scrollTop - iSpeed);
console.log(scrollTop);
},30);
</script>
</head>
<body>
<div class="box">
<img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到頂部"></a>
</body>
</html>
舉報
回到頂部網站不可缺少的一部分，用JS實現炫酷拉風的回到頂部效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-08-23
這是我自己寫的JS執行代碼 跟課程講的稍有差別?
2018-08-23
<!DOCTYPE html>
<html>
<head>
? ? <title>Javascript 回到頂部效果</title>
<style>
#btn {
width:40px;
height:40px;
position:fixed;
left:50%;?
display:none;
margin-left:610px;
bottom:30px;?
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat left top;
}
#btn:hover {
background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat 0 -39px;
}
.box {
width:1190px;?
margin:0 auto;?
}
</style>
<script>
window.onload = function () {
//設置所需變量
var oBtn = document.getElementById('btn');
var scrollTop = 0;
var timer = null;
//滾動時按鈕的顯示與隱藏
window.onscroll = function () {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可視區高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(scrollTop >= clientHeight) {
oBtn.style.display = 'block';
}
else {
oBtn.style.display = 'none';
}
};
//點擊回到頂部
oBtn.onclick = function () {
//設置定時器
timer = setInterval(function () {
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//定義緩沖速度
var iSpeed = scrollTop/5;
//頂部關閉定時器
if (scrollTop == 0) {
clearInterval(timer);
}
document.documentElement.scrollTop = document.body.scrollTop = Math.floor(scrollTop - iSpeed);
console.log(scrollTop);
},30);
};
};
</script>
</head>
<body>
<div class="box">
<img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到頂部"></a>
</body>
</html>