Tin liên quan
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é)
Đơ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>
#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é.
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>
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/
Về đầu bài viết
Những tin mới hơn
Những tin cũ hơn
[Full HD] Cuộc thi trình diễn pháo hoa quốc tế Đà Nẵng 2015 - Đêm bế mạc 29/4/2015 & trao giải
Đã xem: 2295Cuộc thi trình diễn pháo hoa quốc tế Đà Nẵng 2015 - Đêm khai mạc 28/4/2015 - Phần 2
Đã xem: 718Cuộc thi trình diễn pháo hoa quốc tế Đà Nẵng 2015 - Đêm khai mạc 28/4/2015 - Phần 1
Đã xem: 687
Đang truy cập :
58
Hôm nay :
1456
Tháng hiện tại
: 26727
Tổng lượt truy cập : 4123845
Ý kiến bạn đọc