Code nút về đầu trang sử dụng CSS & jQuery

Với một trang website dài thì việc kéo con lăn về đầu trang rất mất nhiều thời gian, có rất nhiều cách để trở về đầu trang như đơn giản chỉ cần đặt một id=”top” trong thẻ div phần đầu trang sau đó dùng thẻ <a>

<a href=”#top”></a>

Tuy nhiên việc này tạo cảm giác cứng, giật cục chính vì thế để cho nó mượt mà người ta mới thêm vào đó một chút jQuery sau đây mình xin hướng dẫn các bạn tạo nút về đầu trang sử dụng jQuery. Đây là code có sẵn bạn chỉ cần thao tác theo các bước mình hướng dẫn là được các bạn có thể xem demo tại đây: http://hangorder.com (bên dưới góc phải khi bạn cuộn trang xuống dưới nó mới hiển thị nhé)

Bước 1. Code html nút về đầu trang

Đơn giản là nó chỉ là một thẻ <div> trống bạn chèn vào trước thẻ đóng </body> nhé tốt nhất là chèn vào phần footer cho nó dễ kiểm soát.

<div id=”goTop”></div>

Bước 2. Code Css cho nút về đầu trang

#goTop {

background: url(images/gotop.png) no-repeat;
bottom: 40px;
cursor: pointer;
display: none;
height: 50px;
position: fixed;
right: 11px;
width: 50px;
overflow: hidden;
z-index: 1000;

}

/*hover nếu bạn sử dụng image của mình*/

#goTop:hover{ background-position-x: -57px;}

Ảnh của mình đây, hình 1 là mặc định hình 2 là khi hover chuột vào nhé.

Bước 3: Code jQuery nút về đầu trang

Dưới đây là code jQuery nút về đầu trang các bạn có thể coppy và pate vào trước thẻ đóng </body> nhé.

<!– go top –>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></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>

Kết luận

Thêm một tý jQuery nữa làm site của bạn mềm mại và lung linh hơn nhiều, nhất là mới những trang dài thì rất cần code nút về đầu trang như thế này.

Chúc bạn thành công!!
http://hocseowebsite.com/code-nut-ve-dau-trang-su-dung-css-jquery/