JQUERY滑动返回顶部代码

JQUERY滑动返回顶部代码

<html>
<head>
<title>JQUERY滑动返回顶部代码</title>
<style>
body { height:2000px;}
#top { position:fixed; right:10px; bottom:20px; width:50; height:50px; line-height:50px; font-size:10px; text-align:center; background:#ccc; color:#000; cursor:pointer;}
#top:hover { background:#000; color:#fff; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var htop=100;  //设定值距离高度100
var speed=500; //速度
$("#top").fadeOut(0);
$(window).scroll(function(){
if ($(window).scrollTop()>htop){    //判断滚动条的高度是否大于设定值
$("#top").fadeIn(300);           //渐现
}else{
$("#top").fadeOut(300);          //渐隐
}
});
$('#top').click(function() {
$('html,body').animate({scrollTop:0},speed);
return false;
});
});
</script>
</head>
<body>
滚动一下,看右下角
<div id="top" title="返回顶部">返回顶部</div>
</body>
</html>
分享到:
标签:Jquery,返回顶部,顶部,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

报歉!评论已关闭.