<div class="gotop" style="display: block;">
<a class="gotop-btn" href="javascript:;"></a>
</div>
<script type="text/javascript">
$(function () {
$(document.body).append("<div class='gotop'><a href='javascript:;' class='gotop-btn'></a></div>");
$(window).scroll(function () {
if ($(window).scrollTop() >= 100) {
$('.gotop').fadeIn(300);
} else {
$('.gotop').fadeOut(300);
}
});
$(".gotop-btn").click(function () {
$('html,body').animate({ scrollTop: '0px' }, 500);
});
});
</script>
样式
.gotop {
position: fixed;
display: none;
width: 51px;
height: 51px;
bottom: 50px;
right: 50px;
}
.gotop-btn {
display: inline-block;
width: 100%;
height: 100%;
background: url("../image/ico_gotop.png");
}
.gotop-btn:HOVER {
background-position: 0px -51px;
}
引用jQ
<script src="JS/jquery-1.8.3.min.js" type="text/javascript"></script>
就OK了