jQuery返回顶部和转到底部代码特效

使用方法：

CSS样式

ul.scroll{width: 15px;float: right;display:block;position:fixed;top:40%;right:0;_position:absolute;_margin-top:300px;_top:expression(eval(document.documentElement.scrollTop));z-index: 6;}
.sct{background: url(images/scroll.png);}
.scb{background: url(images/scroll.png) 0 40px;}
.scc{background: url(images/scroll.png) 0 80px;}
.scroll_t,.scroll_c,.scroll_b{width: 80px;height:40px;line-height:40px;text-align:center;cursor: pointer;border-radius: 20px 0 0 20px;}
.scroll_t{background: #d03f42;}
.scroll_b{background: #383838;}
.scroll_c{background: #467ebd;}
ul.scroll li{position: relative;height:40px;float: right;}
ul.scroll li a{display: block;color:#fff;}
ul.scroll li div{display: none;position: absolute;top: 0;right: 0;}

引入jQuery库文件

<script type="text/javascript" src="js/jquery.min.js" ></script>

插件初始化、参数配置

jQuery(document).ready(function($){
$('.scroll_t').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
$('.scroll_b').click(function(){$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);});
});
$(document).ready(function(){ 
    $("ul.scroll li").hover(function() {
        $(this).find("div").stop()
        .animate({right: "0", opacity:1}, "fast")
        .css("display","block")
    }, function() {
        $(this).find("div").stop()
        .animate({right: "0", opacity: 0}, "fast")
    });  
});