动态显示“返回顶部”功能代码

代码来源及演示:http://xianguo.com/hot

以Discuz为例:
1.修改template/default/common/common.css增加如下CSS代码

/*gotop#polaris*/
.gotop_btn {
    margin-left: 457px;
}
.gotop_btn {
    background: url("{IMGDIR}/backtop.gif") no-repeat scroll 0 0 transparent;
    bottom: 100px;
    display: block;
    height: 70px;
    left: 50%;
    margin-left: 481px;
    position: fixed;
    width: 21px;
}
.gotop_btn:hover {
    background-position: -21px 0;
    text-decoration: none;
}

 

2.修改template/default/common/footer.htm增加如下代码:

<!-- gotop#polaris -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<a href="javascript:void(0);" onClick="window.scrollTo(0,0);" class="gotop_btn" id="goTopButton" style="display:none;">&nbsp;</a>
<script type="text/javascript">
(function($){
	$(window).scroll(function(event){
		if($(this).scrollTop() > 0){
			if($.browser.ie6){
				$(’#goTopButton’).css(’top’, $(this).scrollTop() + $(this).height() - 170);
			}
			if($(’#goTopButton’).css(’display’) == ’none’){
				$(’#goTopButton’).fadeIn();
			}
		}else{
			$(’#goTopButton’).fadeOut();
		}
	});
})(jQuery);
</script>
<!-- gotop#polaris -->

 

3. 上传backtop.gif至图片目录static/image/common/backtop.gif(直接从鲜果盗取就可以了)

 

?????????另一种方案???????????

<a class="toTop" onclick="javascript:window.scroll(0,0);return false">回到顶部</a>

 

/*gotop#polaris*/
a.toTop {
display: block;
width: 52px;
height: 49px;
text-indent: -9999px;
cursor: pointer;
background: url("{IMGDIR}/totop.gif") no-repeat;
position: fixed;
bottom: 0;
right: 40px;
_display: none;
}
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注