转载“精简版”滚动到顶部和底部的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>之前。

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

 

转载于:https://www.cnblogs.com/CB/archive/2010/10/19/1855362.html