Hướng dẫn tạo nút back to top cho wordpress

Khi trang web của bạn có nội dung quá dài mà người truy cập đã xem hết nội dung và muốn di chuyển lên đầu trang, thay vì họ phải sử dụng Scroll di chuyển chậm chạm thì mình có thể tạo một nút Back to top để độc giả của mình chỉ cầm click vào nút đó thì trang web chúng ta sẽ tự động cuộn lên trên, giúp độc giả đỡ phải cuộn bằng tay. Có nhiều cách để tạo nút Back to top, nếu như bạn không dùng javascript mà chỉ dùng một đoạn HTML như thế này:

<a href="#" title="Lên đầu trang">Lên đầu trang</a>

thì khi click vào trang web của bạn sẽ bay cái vù lên trên khiến người xem cảm thấy đột ngột và khó chịu đồng thời nút này chỉ nằm ở cuối trang dẫn đến việc độc giả xem đến giữa trang hay bất kể vị trí nào khác ngoài chân trang thì đều không có nút này để di chuyển nên mình sẽ hướng dẫn các bạn tạo một nút có dùng javascript để trang web di chuyển lên trên một cách mượt mà hơn. Đối với Wordpress thì đầu tiên các bạn hãy kiểm tra xem trong theme đã có link javascript nào chưa, nếu chưa có thì bạn hãy dán link và đoạn code này vào file header.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
     $(window).scroll(function() {
      if($(this).scrollTop() != 0) {
       $('#div-toTop').fadeIn();
      } else {
       $('#div-toTop').fadeOut();
      }
     });
    $('#div-toTop').click(function() {
      $('body,html').animate({scrollTop:0},800);
     });
    });

Dán đoạn này vào dưới file footer.php

<div id="div-toTop"></div>

Và cuối cùng dán đoạn này vào file css:

<style type="text/css">
#div-toTop {
    background: url("images/button_back.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 10px;
    cursor: pointer;
    display: none;
    float: left;
    height: 40px;
    position: fixed;
    right: 10px;
    width: 40px;
}
</style>

Bạn chuẩn bị một hình có tên là button_back.png giống cái tên trong dòng background bên trên và đặt trong Folder images, vậy là xong. Bạn có thể xem demo tại trang Blog này của mình.

Chúc các bạn thành công!

SHARE THIS