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

2011-12-29 2658点热度 0人点赞 0条评论

以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;
}

/*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 -->

(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>

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

另一种方案

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

1	<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;
}