原文链接地址：“精简版”滚动到顶部和底部的jQuery效果
滚动到顶部和底部的jQuery效果也是一个在blog中很常见的jQuery效果。
之前一直用的是西门的《缓冲版”返回顶部”》，当然现在还在继续用，觉得蛮好的，昨天看了一些jQuery的资料，浏览了一些国外jQuery代码网站，于是自己修改了一个”精简版”滚动到顶部和底部的jQuery（折腾玩玩..）。
代码
$(function() {
var $elem = $('#content');//此页面元素里滚动
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');//显示按钮
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);//按下""按钮，将页面滚动到页面底部（所示高度）
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);//按下"向上"按钮，将页面滚动到页面顶部
}
);
});
代码
.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(../images/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:8px;
height:20px;
bottom:10px;
opacity:0.7;
left:4px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(../images/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:8px;
height:20px;
bottom:10px;
opacity:0.7;
left:25px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
最后再在footer.php里面加上:
<div style=”display:none;” id=”nav_up”></div>
<div style=”display:none;” id=”nav_down”></div>
加在</body>之前。
好了，就这样。效果如本站左下角:
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。