所属分类:网页特效-返回顶部
使用方法:
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")
});
});