您在本站浏览的时候，当您往下查看网页内容，右侧下部会出现一张阿童木的图片，点击后，会返回页面顶部。实现效果其实非常的简单。
这里用到了jQuery技术来实现此渐隐渐显的返回顶部效果。
首先我们要先定义CSS样式
#back-to-top
{
position: fixed; width: 125px; bottom: -100px; height: 140px; cursor: pointer; right: 50px; _position: absolute; _right: auto;background-image:url(up.png);background-repeat:no-repeat;background-position: -5px 0px;margin-right:30px;margin-bottom:160px;
}
#back-to-top:hover
{
background-position: -125px 0px;
}
然后会用到以下两段JS代码
<script type="text/javascript" src="http://at15cm.com/script/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//首先将#back-to-top隐藏
$("#back-to-top").hide();
//当滚动条的位置处于距顶部200像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(1000);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 1000);
return false;
});
});
});
</script>
请把以上的CSS及JS代码放入到页面的<head></head>标签中。
然后在页面的<body></body>中加入以下代码：
<DIV style="DISPLAY: none" id="back-to-top"></DIV>
本站返回顶部的效果就会实现了。
如果您不明白，可以点击本站导航的“飞语”联系15cm，或者直接在本文下面留言即可。
发布于 2013-3-4 9:50:33 回复该留言
发表留言:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。