起因
有时候,我们的网页会很长,长到用鼠标滚轮滚动好久才能从页面顶部滚到底部(或从页面底部滚动到顶部),这时如果我们已经浏览到页面中下部,要想返回顶部稍显麻烦(滚动滚轮或者手动滚动条,都较为麻烦),所以为了方便用户快速返回顶部,一般会提供一个返回页面顶部的按钮。
例如以下几个大网站的实现:
今天经理给了一个任务:将项目的帮助页面完善一下挂到项目中,这个帮助页面很长,因此添加一个快速返回页面顶部的按钮比较好,参考了一下网上的博客,实现都比较简单。
自己的实现如下所示:
实现代码
首先我们构造HTML代码,直接加在目标页面的Body区域即可,用DIV模拟按钮,为了鼠标移到上面给用户以提示,在这里给DIV一个title属性。
- HTML代码
<div class='toTop' style="opacity: 1;" title="返回顶部">
<div class="arrow"></div>
<div class="stick"></div>
</div>
- 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 = $('<div class="backToTop"></div>').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(); });
})();