<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回到顶部功能</title>
<script type="text/javascript" src="topic/js/jquery-1.9.1.min.js"></script>
<style type="text/css">
*{margin: 0; padding: 0;}
div{height:3000px;}
h1{text-align: center;}
.back_top{padding:10px; border:1px solid #ccc; position:fixed; right:0; bottom:100px; background-color:red; color:#fff;}
</style>
</head>
<body>
<div>
<h1>我是div的头部</h1>
</div>
<a class="back_top" href="javascript:;">回到顶部</a>
</body>
</html>
<script type="text/javascript">
/**回到顶部功能**/
$('.back_top').hide(); /*首先是先让返回顶部这个按钮隐藏掉*/
$(window).scroll(function(){/*这个是鼠标滚动事件的函数*/
if($(window).scrollTop()>100){/*如果当距窗口顶部距离是大于100像素的时候*/
$('.back_top').fadeIn(1500);/*让返回顶部这个按钮渐渐显示出来*/
}else{
$('.back_top').fadeOut(1000);/*否则如果小于100像素的时候就让这个按钮渐渐地消失*/
}
})
// 返回顶部方法一，这个方法是没什么效果，是直接返回到顶部，
//$(".back_top").click(function(){
// setTimeout(function(){
// $(window).scrollTop(0);
// });
//});
// 返回顶部方法二，这个方法是滑动到顶部
$('.back_top').click(function(){
$('body').animate({
scrollTop:0
}, 500);
});
</script>
返回顶部
猜你喜欢
转载自1185407601.iteye.com/blog/2307733
今日推荐
周排行