标签：alt lock png font 元素 span ext isp src
“回到頂部”功能可以使用a標籤的錨點實現，也可以使用js的onclick事件實現。
關鍵步驟：1.html+css佈局
2.滾動條到滾動到一定高度時候，顯示按鈕“回到頂部”（若還沒有到一定高度，則隱藏）
3.點擊按鈕實現回到頂部：scrollTop = 0;
具體如下：
html:實現頁面效果
<body class="container"> <div class="top"> hello: top <input id="text_input" style="margin-top:150px; " type="text" value="0" /> </div>
<div class="con"> 中間有很多內容 </div>
<!-- 定位的元素 position:fixed; --> <div id="hiddenShow" class ="divHidden"> <input type="button" style="color:Red; font-weight:bold " id="cgotop" value="回到頂部" /> </div> </body>
css:
#hiddenShow { position:fixed; /*定位在页面的底部*/ bottom:0; border:30px solid red; } .divHidden{ display:none; } .divShow{ display:block; }
js:
window.onload = function () { // 顯示或者隱藏Div:回到頂部 window.onscroll = function () { var div_hidden = document.getElementById("hiddenShow"); var t = document.documentElement.scrollTop || document.body.scrollTop; // IE: document.documentElement.scrollTop if (t > 100) { div_hidden.className = "divShow"; } else { div_hidden.className = "divHidden"; } // 顯示滾動條高度： var text_input = document.getElementById("text_input"); text_input.value = "顯示滾動條高度：" + t; // alert(t); }; //點擊回到頂部 var cgotop = document.getElementById("cgotop"); cgotop.onclick = function () { document.getElementsByTagName(‘body‘)[0].scrollTop = 0; document.getElementsByTagName(‘html‘)[0].scrollTop = 0; // jq: $(‘body,html‘).animate( { scrollTop: 0 }, 1000 ); return false; }; };
類似效果圖:點擊回到頂部
标签：alt lock png font 元素 span ext isp src
原文地址：http://www.cnblogs.com/July-/p/6347427.html
