Bài viết sau mình sẽ hướng dẫn bạn cách code tạo nút back to top cho website WordPress. Không cần dùng plugin, giúp website bạn không phải cài nhiều plugin. Website bạn nếu không có nút back to top cho website thì sẽ mang lại trải nghiệm không tốt cho người dùng. Nút back to top cho website giúp người dùng khi kéo xuống dưới website. Chỉ cần bấm vào nút đấy nó sẽ tự động di chuyển lên đầu trang. Sau đây Chuẩn Seo Web sẽ hướng dẫn bạn cách code tạo nút back to top cho website WordPress đơn giản nhất. Bài viết này thuộc chuyên mục WordPress Development. Mời bạn theo dõi.

Code tạo nút back to top cho website WordPress

Dưới đây mình sẽ hướng dân bạn code tạo nút back to top cho website WordPress bằng cách sử dụng code html. Bạn thêm đoạn code tạo nút back to top cho website html sau vào file footer.php trong theme. Nó giúp tạo ra nút button vào các trang trong website của bạn.

<a href="javascript:void(0)" class="csw_btn_back_top" >
    <i class="fas fa-angle-up"></i>
</a>

Sau đó bạn thêm đoạn code css sau vào trong file style.css trong theme.

.csw_btn_back_top {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #af0a24;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 3px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
}

.csw_btn_back_top i {
  font-size: 20px;
  color: #fff;
}

.csw_btn_back_top:hover {
  cursor: pointer;
  background-color: #222;
}

.csw_btn_back_top.show {
  opacity: 1;
  visibility: visible;
}

Khi thêm đoạn code css trên vào nó sẽ giúp hiển thị nút đẹp hơn. Tuy nhiên nó sẽ chưa thể tự động hiện lên khi người dùng kéo chuột xuống dưới. Tiếp theo để nút back to top tự động hiện lên, và khi click vào nó tự kéo lên đầu trang. Bạn cần thêm đoạn code js sau:

$(document).ready(function(){
  var btn = jQuery('.csw_btn_back_top');

  jQuery(window).scroll(function() {
    if (jQuery(window).scrollTop() > 350) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});

Như vậy là bạn đã code tạo nút back to top cho website xong. Mình hy vọng sẽ giúp ích cho bạn. Nếu có thắc mắc hay câu hỏi gì bạn vui lòng để lại bình luận bên dưới. Cám ơn bạn đã theo dõi bạn viết.