如何给页面加上浮动的返回顶部按钮

时间: 2013-12-9 分类: Javascript 作者: SAI

TAGS:

在网上见过很多网站都有一个返回顶部的按钮,右侧有一个Top按钮,而且这个按钮是随着页面向下滚动的;

这样会给访客一个很好的用户体验,用jquery的一个动画效果做出来就可以,效果很漂亮,代码又简洁,但是后来在ie6的测试下,不 起作用,原因就是ie6不支持position:fixed;这个属性(万恶的ie6啊)。最后经过在网上搜索,找到了一个jquery插件实现了以上效 果,下面介绍下这个插件的使用,看代码:

  ////////////////回到顶部代码
$.fn.extend({
goToTop: function(b) {
var b = $.extend({
pageWidth: 1016,//附着容器宽度
pageWGap: 0,//按钮和容器的距离
pageHGap: 60,//按钮和页面底部的距离
startline: 20,//出现按钮时的滚动条滚动的距离
duration: 200,//回到顶部的速度时间ms
showBtntime: 100//显示\隐藏回到顶部按钮的速度时间
},
b);
var e = $(this);
var f = $(window);
var d = (window.opera) ? (document.compatMode == “CSS1Compat” ? $(“html”) : $(“body”)) : $(“html,body”);
var c = !($.browser.msie && parseFloat($.browser.version) < 7);
var a = false;
e.css({
opacity: 0,
position: (c ? “fixed”: “absolute”)
});
e.click(function(g) {
d.stop().animate({
scrollTop: 0
},
b.duration);
e.blur();
g.preventDefault();
g.stopPropagation()
});
f.bind(“scroll resize”,
function(i) {
var h;
if (f.width() > b.pageHGap * 2 + b.pageWidth) {
h = (f.width() – b.pageWidth) / 2 + b.pageWidth + b.pageWGap
} else {
h = f.width() – b.pageWGap – e.width()
}
var j = f.height() – e.height() – b.pageHGap;
j = c ? j: f.scrollTop() + j;
e.css({
left: h + “px”,
top: j + “px”
});
var g = (f.scrollTop() >= b.startline) ? true: false;
if (g && !a) {
e.stop().animate({
opacity: 1
},
b.showBtntime);
a = true
} else {
if (a && !g) {
e.stop().animate({
opacity: 0
},
b.showBtntime);
a = false
}
}
})
}
});

$(function(){
$(‘<div title=”点击返回顶部”>TOP</div>’).appendTo(“body”);//将html代码放入页面
$(“.go-top”).goToTop({});
$(window).bind(‘scroll resize’,function(){
$(“.go-top”).goToTop({});
});
});

代码注释的很清楚,相信你懂的(如果不懂,可以看下js教程),首先上面的b里的参数是可以修改的,可以定义你想要的效果;下面是这个按钮对应的css代码:

/*** 回到顶部
————————————————————– ****/
.go-top {
-moz-border-radius: 6px;
border-radius:6px ;
background: #D2D9E1;
cursor: pointer;
font-weight: bold;
line-height: 14px;
padding: 10px 5px;
text-align: center;
text-decoration: none;
}
.go-top:hover{color:#c00;}

当然这个按钮也可以是一个图片,将“TOP”换成“<img src=”你网站的网址top.gif”/>”即可,注意图片的路径,“top.gif”是你已做好的图片,ahuing建议你修改样式用图片做背景,这样可以提高页面的加载速度:-)

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » Javascript » 如何给页面加上浮动的返回顶部按钮
本文地址:http://www.saiody.com/?p=1073

返回顶部