Cách thêm nút Back To Top vào website

Ngày đăng: 08-09-2018 Lượt xem: 2582

Với website có giao diện dài nút Back To Top (lên đầu trang) rất quan trọng, giúp người dùng có thể cuộn lên đầu trang nhanh chóng. Hiện nay hầu hết website đều thêm nút Back To Top vào, rất hữu ích nhất là trên thiết bị di động. Vậy làm thế nào để thêm nút Back To Top vào website, hãy cùng làm theo hướng dẫn sau:

Cách thêm nút back to top vào website - HIWEB

Bước 1: Thêm thẻ html sau vào phần Footer website:

<a href="javascript:void(0);" class="scroll_top" title="Lên đầu trang">Scroll</a>

Bước 2: Thêm đoạn Jquery sau:

$(window).scroll(function(){
    /* Show hide scrolltop button */
    if( $(window).scrollTop() == 0 ) {
        $('.scroll_top').stop(false,true).fadeOut(600);
    }else{
        $('.scroll_top').stop(false,true).fadeIn(600);
    }
});

/* scroll top */ 
$(document).on('click','.scroll_top',function(){
    $('body,html').animate({scrollTop:0},400);
    return false;
})

Lưu ý: Code jquery này cần đặt sau thư viện Jquery để có thể hoạt động được

Bước 3: Thêm code css

.scroll_top{
  width: 34px;
  height: 34px;
  position: fixed;
  display: none;
  font-size: 0;
  z-index: 9999;
  right: 10px;
  bottom: 32px;
  background: #f7a61b;
  display: none;
}
.scroll_top:hover{
  background: #0088cc;
}
.scroll_top:before {
  content: "\f106";
  font-family: "FontAwesome";
  font-size: 14px;
  color: #fff;
  text-align: center;
  width: 34px;
  height: 34px;
  line-height: 34px;
  display: block;
}