Hôm nay mình xin chia sẻ cho các bạn code tạo nút lên đầu trang bên phải màng hình đơn giản. Nút lên đầu trang sẽ hiển thị liên tục khi truy cập, khi bạn bấm vào thì lập tức sẽ nhảy đến ngay đầu trang website.
<a href='#' style='display: scroll; position: fixed; bottom: 10px; right: 10px;' title='Lên trên'><img src='http://utnhan.wap.sh/wapmaster/photo/top.png' alt='' style='border: 0px;'/></a>
Còn đoạn code dưới đây thì có thêm hiệu ứng tự ẩn nút lên trên khi bạn ở đầu trang website. Khi bạn kéo trang xuống thì nút lên đầu trang sẽ hiển thị. Bạn click chuột vào nút lên đầu trang thì trang sẽ chạy dần lên.
<div id='bttop'><img src="http://utnhan.wap.sh/wapmaster/photo/top.png" alt="top"/></div><style type='text/css'>#bttop{ padding:5px; position:fixed; bottom:35px; right:10px; display:none; }</style><script src='http://utnhan.wap.sh/wapmaster/code/top.js' type='text/javascript'></script><script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() != 0) {
$('#bttop').fadeIn();
} else {
$('#bttop').fadeOut();
}
});
$('#bttop').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
});
});</script>