[jQuery] JS 製作一個網頁滑到底部出現 TOP 往上回頂端的按鈕符號

Go to top / back-to-top

如何製作一個左下角出現往上回到頂端的特效?
常見於 RWD 網頁設計。
 

DEMO 效果:


 

開始製作:

在 HTML 網頁底部<body>上方放:

<a href="#" class="back-to-top" name="webgolds"><i class="fa fa-angle-up fa-6"></i></a>


jQuery(document).ready(function() {
  var a = 220,
      b = 400;
  jQuery(window).scroll(function() {
    jQuery(this).scrollTop() > a ? jQuery(".back-to-top").fadeIn(b) : jQuery(".back-to-top").fadeOut(b)
  }), jQuery(".back-to-top").click(function(a) {
    return a.preventDefault(), jQuery("html, body").animate({
      scrollTop: 0
    }, b), !1
  })
})
備註:記得引用 jQuery 庫



a.back-to-top {
    background-color: rgba(0,0,0,.3);
    border-radius: 50%;
    bottom: 10px;
    color: #fff;
    display: none;
    font-size: 26px;
    padding: 4px 11px;
    position: fixed;
    right: 12px
}

a.back-to-top:hover {
    background-color: rgba(0,0,0,.5)
}





 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 400
Last updated :2017-11-15