您当前的位置：首页>爱学习网站首页爱学习
web返回顶部源码
发布时间：2015-12-16信息来源：个人博客阅读（）收藏纠错
一：简单的
<a href="javascript:scroll(0,0)">返回顶部</a> or <a href="#top" target="_self">返回顶部</a>
二：动态的
①：html部分
<script src="/js/jquery-1.7.2.min.js"></script>
<div class="top">
<div class="s_xd">
<div class="s_top" id="j_top" title="返回顶部" style="display: block;"></div>
<a href="http://wpa.qq.com/msgrd?v=3&uin=625030319&site=qq&menu=yes" title="联系我" target="_blank" rel="nofollow"><div class="s_qq"></div></a>
<a href="/liuyanban" title="想对我说点什么嘛！"><div class="s_guestbook"></div></a>
</div>
</div>
②：css部分
.top{width:53px;height:160px; position:fixed;bottom:29px;right:22px;_position:absolute;/* bottom:60px; *//* right:90px; */}
.top .s_xd{position:relative;width:53px}
.top .s_top{width:53px;height:50px; background:url("../images/beijing.png") -41px -110px no-repeat; position:absolute;top:0px;right:0px;}
.top .s_top:hover{background:url("../images/beijing.png") -93px -110px no-repeat;}
.top .s_qq{width:53px;height:50px; background:url("../images/beijing.png") -41px -0px no-repeat;position:absolute; top:55px;right:0px;}
.top .s_qq:hover{background:url("../images/beijing.png") -93px -0px no-repeat;}
.top .s_guestbook{width:53px;height:50px; background:url("../images/beijing.png") -41px -55px no-repeat;position:absolute; top:110px;right:0px;}
.top .s_guestbook:hover{background:url("../images/beijing.png") -93px -55px no-repeat;}
③：js部分
<script type="text/javascript">
$(function(){
showScroll();
function showScroll(){
$(window).scroll( function() {
var scrollValue=$(window).scrollTop();
if(scrollValue > 100){
$('#j_top').fadeIn();
}else
{$('#j_top').fadeOut();}
} );
$('#j_top').click(function(){
$("html,body").animate({scrollTop:0},200);
});
}
});
$(function() {
$(".dl_ul").find("li").hover(function() {
var left = $(this).attr("left");
$(".xiahua").stop().animate({ left: "+" + left + "px" }, 300);
var to = $(this).attr("to");
$(".wz").hide();
$("#" + to).show();
});
});
</script>
关键字词：web,返回顶部源码
上一篇：帝国cms表情投票插件
