當1個頁面比較長的時候，在下拉頁面到1定長度的時候，頁面右下角通常會出現1個回到頂部的圖標，點擊便可以回到頁面頂部，本案例對這1功能進行了簡單實現。當頁面下拉到1定長度后，頁面右下角出現1個回到頂部圖標，點擊以后，頁面會滑動到頁面頂部，同時回到頂部圖標也會消失。合適初學者參考。
<!doctype html>
<html>
<head>
<meta charset="UTF⑻">
<title>Document</title>
<style>
.return-top{
width:100px;
height:100px;
font:bold 50px/100px "宋體";
color:#fff;
background-color:purple;
position:fixed;
bottom:20px;
right:20px;
text-align:center;
cursor:pointer;
display:none;
}
.return-top.active{
display:block;
}
</style>
</head>
<body>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<h1>大鵬1日同風起，扶搖直上9萬里。</h1>
<div class="return-top" id="return_top">▲</div>
<script>
/*
思路：
第1步：當頁面加載完后，獲得所要操作的 節點對象
第2步：為window對象添加1個轉動條轉動事件onscroll
第3步：
在轉動條轉動的進程中，不斷的獲得轉動條距離頂部的距離數值
當這個數值大于300的時候，顯示出回到頂部圖標
否則，隱藏回到頂部圖標
第4步：
為回到頂部圖標添加1個點擊事件，轉動條回到頂部。
*/
var return_top = document.getElementById("return_top");
var sTop;
window.onscroll = function(){
//sTop :轉動條距離頂部的距離數值
sTop = document.body.scrollTop||document.documentElement.scrollTop;
if(sTop>300){
return_top.className = "return-top active";
}else{
return_top.className = "return-top";
}
}
return_top.onclick = function(){
var termId = setInterval(function(){
sTop-=50;
if(sTop<=0){
clearInterval(termId);
}
window.scrollTo(0,sTop);
},1);
}
</script>
</body>
</html>
本案例對回到頂部功能進行了簡單實現，讀者可以運行代碼查看效果。
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
