thucnguyenblog logo

Tạo nút back to top cho website dùng jQuery

thucnguyenit35
31/08/2016 - 10:31:00

Nội dung của một trang web quá dài, để thuận tiện cho người dùng đỡ phải kéo thanh trượt lên đầu trang thì ta thêm nút back to top (hay scroll to top) tạo sự thuận tiện nhất cho người dùng. Các bạn để ý thì NguyenThuc's Blog cũng có nút back to top, hôm nay tôi sẽ chia sẻ code để làm được nút này.

HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 800px">
  Content
  <div id="back-top" title="Top of Page">&uarr;</div>
</div>


Javascript
$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      $('#back-top').fadeIn();
    } else {
      $('#back-top').fadeOut();
    }
  });
  // scroll body to 0px on click
  $('#back-top').click(function() {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });
});

CSS
#back-top {
  border-radius: 5px;
  color: white;
  background: blue;
  padding: 10px;
  position: fixed;
  bottom: 68px;
  right: 25px;
  display: none;
  opacity: 0.8;
  cursor: pointer;
}


 Author infomation:
Xin chào các bạn! Tôi tên là Thức, tôi sinh ra và lớn lên tại quê hương Yên Mỹ, Yên Mô, Ninh Bình, từ thời Trung học tôi đã yêu thích tin học và công nghệ. Tôi tốt nghiệp ngành Công nghệ thông tin tại Đại học Mở Hà Nội, hiện tại tôi đang là một Web Developer. Tôi tạo ra blog này nhằm mục đích chia sẻ kinh nghiệm, kiến thức mà tôi đã trải qua trong cuộc sống, vì thế sẽ có thể thiếu sót mong các bạn đóng góp để giúp tôi hoàn thiện hơn.