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

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;
}

Lưu ý: Bạn chú ý thay phần: right: 10px; bottom: 32px; cho phù hợp với website của mình.

Như vậy HIWEB đã hướng dẫn thêm nút Lên đầu trang (back to top) hi vọng các bạn có thể áp dụng thành công vào website của mình!

Tin tức khác
 
Thiết kế website tại huyện Thạch Thất

Thiết kế website tại huyện Thạch Thất

Thiết kế web giá rẻ tại huyện Thạch Thất - Hà Nội. Chúng tôi chuyên tư vấn và thiết...
Tổng hợp các Kênh Marketing hiệu quả trong lĩnh vực Bất Động Sản

Tổng hợp các Kênh Marketing hiệu quả trong lĩnh vực Bất Động Sản

Với nhiều năm kinh nghiệm trong ngành Marketing Online, hỗ trợ Marketing cho nhiều dự án Bất Động...
Cách tăng tỉ lệ click CTR cho quảng cáo Adwords của bạn

Cách tăng tỉ lệ click CTR cho quảng cáo Adwords của bạn

Khi bạn chạy quảng Cáo Adwords, thông số tỉ lệ Click CTR là một yếu tố bạn nên quan tâm hàng...
Thiết kế website trung tâm tiếng Anh

Thiết kế website trung tâm tiếng Anh

Bạn đang cần thiết kế website trung tâm tiếng Anh nhằm quảng bá cho trung tâm tiếng Anh...
Kinh nghiệm chạy quảng cáo Facebook

Kinh nghiệm chạy quảng cáo Facebook

Ngày nay người người quảng cáo Facebook, nhà nhà quảng cáo facebook, tuy nhiên không phải ai quảng...
Thiết kế website bán đồ trẻ em

Thiết kế website bán đồ trẻ em

Bạn đang kinh doanh quần áo, thời trang cho trẻ em nhưng đang không biết làm thế nào để có thể...
Scroll