Phiên bản cải tiến từ sản phẩm trước (Nút lên đầu trang cố định trên màn hình của tác giả eikei-blog). Ứng dụng jQuery cho hiệu ứng trượt khi chuyển động điều hướng & chế độ ẩn hiện nút lên đầu trang cố định trên màn hình.
Có truy xuất tệp javascript jQuery bản 1.3.2. Hãy gỡ bỏ nếu website của bạn đã trang bị phiên bản cao hơn.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<style>
#toppage {
width:100px;
background:#F4FFBF;
border:1px solid #ccc;
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
}
</style>
<a href="#" id="toppage">Lên đầu trang</a>
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toppage").scrollToTop();
});
</script>
<style>
#toppage {
width:100px;
background:#F4FFBF;
border:1px solid #ccc;
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
}
</style>
<a href="#" id="toppage">Lên đầu trang</a>
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toppage").scrollToTop();
});
</script>