### HTML ```html <a id="backtop" class="border-bottom" href="javascript:;">回頂部</a> ``` ### CSS ```css .border-bottom { padding: 10px; display: block; color: #999; text-decoration: none; position: fixed; right: 40px; bottom: 40px; border: 1px solid #DDD; background: #FFF; width: 20px; text-align: center; border-radius: 2px; line-height: 1.25; z-index: 1000; opacity: 0; } ``` <!-- more --> ### javascript ```js //緩動動畫,可以控制速率 var backToTop = function (rate) { var doc = document.body.scrollTop? document.body : document.documentElement; var scrollTop = doc.scrollTop; var top = function () { scrollTop = scrollTop + (0 - scrollTop) / (rate || 2); if (scrollTop < 1) { doc.scrollTop = 0; return; } doc.scrollTop = scrollTop; // 動畫gogogo! requestAnimationFrame(top); }; top(); }; var topBtn = document.getElementById('backtop'); topBtn.onclick=function(){ backToTop(12) } //監聽滾動事件 window.onscroll = function(e){ var doc = document.body.scrollTop? document.body : document.documentElement; var scrollTop = doc.scrollTop; if(scrollTop>=300){ topBtn.style.opacity=1; }else{ topBtn.style.opacity=0; } } ``` <p class="over">Over！</p>