Hiệu ứng scroll top ta thường thấy xuất hiện ở 1 số trang web có nội dung dài -khiến người lướt web phải lăn mouse 3 hay dùng trỏ chuột kéo thanh scroll bar rất bất tiện .
Hôm nay KHÁM PHÁ BLOGSPOT chia sẻ một code blogspot rất hay, và chạy nhẹ nhàng uyển chuyển tới các bạn
![](http://1.bp.blogspot.com/-ap6CHsPf-W8/UkWuwFPjOsI/AAAAAAAAADI/ye6cbmPc44Q/s320/scrolltotop.jpg)
Khi sử dụng hiệu ứng jquery scroll top sẽ giúp người dùng trở về ngay đầu trang - tránh làm mất thời gian - nút bấm scroll top sẽ xuất hiện thi nội dung trang web được
1- Thêm phần script
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 'slow');
return false;
});
});
</script>
2- Thêm phần style của nút lên
<style>
.scrollup{
width:40px;
height:40px;
opacity:1;
position:fixed;
bottom:20px;
right:10px;
display:none;
text-indent:-9999px;
background:#333333 url('http://icons.iconarchive.com/icons/troyboydesign/delightful-zodiac/128/Snake-icon.png') no-repeat;
}
</style>
các bạn có thể thay bằng hình ảnh khác cho phù hợp với trang web http://icons.iconarchive.com/icons/troyboydesign/delightful-zodiac/128/Snake-icon.png
3- Giờ để xuất hiện cái nút đi lên đó bạn hãy đặt trong thẻ body để tiện bạn có thể đặt trước
<a href="#" class="scrollup">Scroll</a>
</body>