不灭的火

现在网站基本提供了这么一个功能： 当页面超过一屏时，从第二屏开始页面右边底部悬浮一个 top 提示，点击返回页面顶部。

效果图如下：

按钮样式：

/* 返回顶部 */
.backtop {
	display: none;
	cursor: pointer;
	width: 44px;
	height: 44px;
	background: url(../images/icon-run-top.png) no-repeat 0 0 #A9C18B;
	position: fixed;
	_position: absolute;
	right: 0;
	bottom: 155px;
	_bottom: auto;
}

JavaScript代码：

/* 返回顶部 */
function backTop() {

	var isIE6 = ($.browser.msie && ($.browser.version == "6.0") && !$.support.style);
	$(window).bind("scroll resize", function () {
		var backtop = $('#backtop'),
		winWidth = $(window).width(),
		winHeight = $(window).height(),
		//pageHeight = $(document).height(),
		rightValue,
		topValue,
		iconWidth = backtop.width(); ;

		if ($(window).scrollTop() > winHeight) {
			backtop.show();
			if (winWidth >= 980) { // 设计页面宽度为 980px
				rightValue = (winWidth - 980) / 2 - iconWidth - 25;
				backtop.css({
					"right" : rightValue
				});
				if (isIE6) {
					topValue = winHeight - 200 + $(window).scrollTop();
					backtop.css({
						"top" : topValue
					});
				}
			} else {
				backtop.hide();
			}
		} else {
			backtop.hide();
		}
	});
}

调用方法：

function showBackTop() {
	var html = '<div id="backtop" class="backtop" onclick="window.scrollTo('0','0')"></div>';
	$('body').append(html);
	backTop();
}

额外参考代码：（含有动画效果）

$("#scrollMore").click(function(){
	$("body,html").animate({"scrollTop":"580"},400);
});

简洁版“回到顶部”：

<a id="top_stick" title="返回顶部" class="top_stick" href="javascript:;" onclick="window.scrollTo('0','0');"> </a>