JQ左右进出动画返回顶部
发布时间:2015-11-11, 14:48:46 分类:HTML | 编辑 off 网址 | 辅助
图集1/1
正文 2798字数 42,849阅读
<style>
/*返回顶部*/
.toTop{width:50px;height:50px;position:fixed;bottom:2px;right:-60px;outline:0;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;_position:absolute;z-index:10000;}
.toTop.showThis{right:8px;transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}
.toTop b{width:100%;height:100%;display:block;text-indent:-9999em;background:url(icon_top.png) no-repeat;}
.toTop:hover b{background-position:0 -50px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<!--放在头部-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--放在底部-->
<a href="javascript:;" class="toTop"><b>回顶部</b></a>
<script>
$(function(){
//调用返回顶部
topControl('.toTop');
//返回顶部
function topControl(obj){
var _this=$(obj);
_this.click(function(){
$("html,body").animate({scrollTop: 0}, 500);
})
$(window).scroll(function(){
if($(this).scrollTop()!=0){
_this.addClass("showThis");
//判断是否是IE6
if($.browser.msie && $.browser.version==6.0){
_this.css({
bottom:'auto',
top:$(window).height()-$(_this).height()+$(window).scrollTop()
})
}
}else{
_this.removeClass("showThis");
}
})
}})
</script>
Run code
Cut to clipboard

(支付宝)给作者钱财以资鼓励 (微信)→
暂无评论 »