JS实现让页面返回顶部

起因

有时候，我们的网页会很长，长到用鼠标滚轮滚动好久才能从页面顶部滚到底部（或从页面底部滚动到顶部），这时如果我们已经浏览到页面中下部，要想返回顶部稍显麻烦（滚动滚轮或者手动滚动条，都较为麻烦），所以为了方便用户快速返回顶部，一般会提供一个返回页面顶部的按钮。

例如以下几个大网站的实现：

   

今天经理给了一个任务：将项目的帮助页面完善一下挂到项目中，这个帮助页面很长，因此添加一个快速返回页面顶部的按钮比较好，参考了一下网上的博客，实现都比较简单。

自己的实现如下所示：

实现代码

首先我们构造HTML代码，直接加在目标页面的Body区域即可，用DIV模拟按钮，为了鼠标移到上面给用户以提示，在这里给DIV一个title属性。

• HTML代码

• CSS代码

用CSS代码在DIV中实现了一个小箭头。

.toTop {
	position: fixed;
	bottom: 113px;
	z-index: 20;
	left: 80%;
	width: 38px;
	height: 38px;
	background-color: #ddd;
	border-radius:3px;
	cursor: pointer;
}
.toTop>.stick {
	position: absolute;
	width: 8px;
	height: 14px;
	display: block;
	left: 15px;
	top: 15px;
	border-radius: 1px;
	background-color: #aaa
}
.toTop>.arrow {
	position:absolute;
	left:10px;
	top:-1px;
	width:0;
	height:0;
	border: 9px solid rgba(126, 27, 27, 0);		
	border-bottom-color:#aaa
}

• JS代码

JS代码中用到了JQuery，网页加载后并不显示按钮，而是当网页滚动一段距离后显示该按钮；当点击按钮或者拖动滚动条使网页回到顶部后，该按钮又隐藏起来。

$(function(){
	var $backToTopEle = $('.toTop'), $backToTopFun = function() {
		var st = $(document).scrollTop(), winh = $(window).height();
		(st > 200) ? $backToTopEle.fadeIn('slow') : $backToTopEle.fadeOut('slow');
		//IE6下的定位
		if (!window.XMLHttpRequest) {
			$backToTopEle.css("top", st + winh - 166);
		}
	};
	$('.toTop').click(function() {
		$("html, body").animate({ scrollTop: 0 }, 1200);
	})
	$backToTopEle.hide();
	$backToTopFun();
	$(window).bind("scroll", $backToTopFun);
	$('#catalogWord').click(function(){
		$("#catalog").slideToggle(600);
	})
})

JS代码参考了这里：http://www.cnblogs.com/ATree/archive/2011/04/09/JQuery_Mootools_Back-Top.html，在此表示感谢。

参考代码

另外在这里把参考的代码贴一下，作者没有预先在页面中添加按钮的HTML代码，而是在页面加载完成后由JS来添加，如下所示：

CSS代码：

.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}

JS代码：

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('
').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();