转载“精简版”滚动到顶部和底部的jQuery效果

原文链接地址：“精简版”滚动到顶部和底部的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>之前。

好了，就这样。效果如本站左下角: