首页 > 代码库 > jQuery实现简单而且很酷的返回顶部链接效果
jQuery实现简单而且很酷的返回顶部链接效果
demo：
html部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>返回页面顶部</title>
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/style.css">
<script type="text/javascript" src=http://www.mamicode.com/"../jquery/js/jquery-1.7.2.min.js"></script>
</head>
<body>
<p>1</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>2</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>3</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>4</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>5</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="back_to_top">
<a href=http://www.mamicode.com/"#">
<div>返回顶部</div>
<div>广告或图片部分</div>
</a>
</div>
<script type="text/javascript" src=http://www.mamicode.com/"js/returntop.js">
</script>
</body>
</html>
css样式：
#back_to_top {
position: fixed;
bottom: 100px;
right: 0px;
width: 100px;
height: 100px;
background: #ccc;
-moz-transition: background 1s;/*鼠标经过颜色渐变效果*/
-webkit-transition: background 1s;
-o-transition: background 1s
}
#back_to_top:hover {
background: #aaa;
}
js文件：
$(document).ready(function () {
$("#back_to_top").hide();//首先将#back-to-top隐藏
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$("#back_to_top").fadeIn(1500);
} else {
$("#back_to_top").fadeOut(1500);
}
});
//点击后返回到顶部
$("#back-to-top").click(function () {
$(‘body,html‘).animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
也可以在添加锚点链接
<body id="top">
<div id="back_to_top">
<a href=http://www.mamicode.com/"#top">
<div>返回顶部</div>
<div>广告或图片部分</div>
</a>
</div>
文章部分来自（飞鱼的声纳）
jQuery实现简单而且很酷的返回顶部链接效果