现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现。点击他会直接跳到页面的顶端。代码如下:
html代码:
<div id="top">
<p id="back-to-top"><a href="#top"><span><img src="images/gotop.jpg"></span>返回顶部</a></p>
</div>
css代码:
p#back-to-top{position:fixed;display:none;bottom:100px;right:10px;overflow: hidden;}
p#back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;-moz-transition:color 1s;-webkit-transition:color 1s;-o-transition:color 1s;overflow: hidden;}
p#back-to-top a:hover{color:#979797;}
p#back-to-top a span{display:block;height:50px;50px;margin-bottom:5px;-moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
#back-to-top a:hover span{overflow: hidden;}
#back-to-top a span img{border:none; 50px;height: 50px;}
jquery代码:
/*top特效*/
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#down").smartFloat();