Thêm nút Back to top đơn giản để vào blogspot

Updated on January 11, 2016
Thêm nút Back to top đơn giản để vào blogspot
Bước 1: Thêm CSS
Thêm font awesome vào nếu template của bạn chưa có,
Chèn thêm đoạn CSS sau vào
/* backtotop */
#backtotop{background:#888;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;padding:0;border-radius:5px;border:1px solid transparent}
#backtotop:before{content:"\f077";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;color:#fff;font-size:30px;padding:0;position:absolute;top:3px;left:5px}
Bước 2: Thêm đoạn code sau trước thẻ </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt;
<!-- back to top -->
<script type='text/javascript'>
//<![CDATA[  
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backto-top",bookmark2.innerHTML='<div id="backtotop" onclick="return false;" onmousedown="resetScroller(&quot;nav&quot;);"></div>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>100?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=10;
//]]>
</script>
Chú ý nếu không được, hãy thay nav bằng những thẻ id phía trên trong template của bạn, như header-wrapper, header-inner...
Share this: pinterest