您的位置:首页

返回顶部的插件

2016-06-22 16:45 260 查看
插件 manhuatoTop.js

/***
* 返回顶部
* version:manhuatoTop.1.0.js
***/
$(function() {
$.fn.manhuatoTop = function(options) {
var defaults = {
showHeight : 150,
speed : 1000
};
var options = $.extend(defaults,options);
$("body").prepend("<div id='totop'><a></a></div>");
var $toTop = $(this);
var $top = $("#totop");
var $ta = $("#totop a");
$toTop.scroll(function(){
var scrolltop=$(this).scrollTop();
if(scrolltop>=options.showHeight){
$top.show();
}
else{
$top.hide();
}
});
$ta.hover(function(){
$(this).addClass("cur");
},function(){
$(this).removeClass("cur");
});
$top.click(function(){
$("html,body").animate({scrollTop: 0}, options.speed);
});
}
});


  样式 manhuatoTop.css

*{}
#totop{position:fixed;bottom:40px;right:8px;z-index:999;width:40px; cursor:pointer; display:none;}
*html #totop{position:absolute;cursor:pointer;right:10px; display:none;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-112+"px")}
#totop a{display:block;width:40px;height:60px;background:url(../images/toTop.gif) no-repeat;}
#totop a.cur{background-position:-40px 0;}


  使用方法

<script type="text/javascript" src="/static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/js/manhuatoTop.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/manhuatoTop.1.0.css">
<script type="text/javascript">
$(function (){
$(window).manhuatoTop({
showHeight : 100,//设置滚动高度时显示
speed : 500 //返回顶部的速度以毫秒为单位
});
});

</script>


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: