JS Go Top | Tạo nút trở về đầu trang cho website

Webite quá dài khiến bạn nghĩ tới việc cần nút tạo về đầu trang, dưới đây là nguồn ăn sẵn cho các bạn chỉ cần COPY&PATE là bạn có thể tạo nút trở về đầu trang đẹp mắt với JS.  

#1. JS/ Chèn đoạn JS sau vào footer

<!-- Trở về đầu trang --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(this).scrollTop() > 100) $('#goTop').fadeIn(); else $('#goTop').fadeOut(); }); $('#goTop').click(function() {$('body,html').animate({scrollTop: 0}, 'slow'); }); });</script>
<div id="goTop"></div>

#2. CSS/ Thêm đoạn CSS sau vào file style.css

#goTop { background: url(img/gotop.png) no-repeat; bottom: 280px; cursor: pointer; display: none; height: 50px; position: fixed; right: 11px; width: 50px; overflow: hidden; z-index: 1000; } #goTop:hover { background-position-x: -57px; }

#3 IMG / Thêm ảnh này hoặc ảnh nào bạn thích vào thư mục img

 (CSS trên cho ảnh này nhé)

Lưu ý với mỗi hình ảnh nút trở về đầu trang bạn cần chỉnh lại CSS cho phù hợp kích thước và hover, trên đây là CSS cho ảnh mặc đinh.