Nút Scroll To Top là button mà chúng ta thường gặp nhất trên các website. Button này rất dễ làm, chỉ với một ít code html và javascript bạn đã có thể tạo cho chính website của bạn. Tôi tham khảo bài viết này trên STDIO khi chèn vào website. Bạn có thể tùy chỉnh những cuộc tính dưới đây cho phù hợp với website của mình.


Dưới đây là các bước thực hiện:

Bước 1: Mở Chủ đề, sau đó vào chế độ Chỉnh sửa HTML.
Bước 2: Tìm </head>, sau đó chèn vào bên dưới đoạn code dưới đây:

<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css"/>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

<style type="text/css">

 .button_scroll2top

 {

  display:none;

  width:80px;

  height:70px;

  padding-top:20px;

  padding-left:10px;

  position:fixed;

  z-index:999;

  right:-45px;

  top:45%;

  background:#fb3;

  border-radius:999px;

  cursor:pointer;

  opacity:0.6;

  color:#fff;

  font-size:2.0em;

 }

 .button_scroll2top:hover

 {

  opacity:1.0;

 } 

</style>
Bước 3: Tìm </body> và chèn vào bên trên đoạn code dưới đây: 

<div href="javascript:;" class="button_scroll2top" onclick="page_scroll2top()"><i class="fa fa-chevron-up"></i></div>
Bước 4: Tiếp tục chèn vào bên dưới đoạn code dưới đây: 

<script type="text/javascript">

 $(window).scroll(function(){

  if($(window).scrollTop() >= 10) {

   $('.button_scroll2top').show();

  } else {

   $('.button_scroll2top').hide();

  }

 });

 function page_scroll2top(){

  $('html,body').animate({

   scrollTop: 0

     }, 'fast');

 }

</script>
Bước 5: Nhấp Lưu chủ đề và trở về website để xem kết quả.

Lưu ý: Demo được sử dụng thư viện Font Awesome và jQuery.

Lời kết
Việc tạo một một nút back to top khá đơn giản. Các bạn chưa có kiến thức về lập trình thì vấn có thể thực hiện theo các bước trên để có một button đẹp. Các bạn có thể thay đổi CSS để tạo riêng button này cho website của mình.

Theo stdio.vn
Tags: