<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>特效加工厂</title> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <style type="text/css"> body { margin: 0; padding: 0; font-size: 12px; } #main { width: 910px; margin: 0 auto; height: 2000px; } .go { width: 47px; height: 106px; position: fixed; _position: absolute; _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||200)-(parseInt(this.currentStyle.marginBottom, 10)||0))); right: 12px; bottom: 25%; background-image: url("tobg.png"); background-repeat: no-repeat; background: red; } .go a { display: block; width: 37px; margin: 5px; border: 0; overflow: hidden; float: left; cursor: pointer; background-color: red; } .go .top { background: #f60; height: 22px } .go .feedback { background-position: 0 -22px; height: 32px } .go .bottom { background: #ccc; height: 22px } .go .top:hover { background-position: -38px -0px } .go .feedback:hover { background-position: -38px -22px } .go .bottom:hover { background-position: -38px -55px } </style> <script type="text/javascript"> $(function() { $(".top").click( //定义返回顶部点击向上滚动的动画 function() { $('html,body').animate({ scrollTop: 0 }, 700); }); $(".bottom").click( //定义返回底部点击向下滚动的动画 function() { $('html,body').animate({ scrollTop: document.body.clientHeight }, 700); }); }) </script> </head> <body> <div id="main"> <div class="go"> <a title="返回顶部" class="top">top</a> <a title="如果您有意见，请反馈给我们！" class="feedback" href="http://www.baidu.com" target="_blank">反馈</a> <a title="返回底部" class="bottom">bottom</a> </div> </div> </body> </html>
效果图：
兼容zepto另外一种：
html:
<a href="javascript:;" class="public_gotop" id="gotop"></a>
样式：
/*返回顶部*/ .public_gotop{ background: url(images/icon_gotop.png) no-repeat; width: 32px; height: 32px; background-size: 100%; overflow: hidden; position: fixed;right: 10px; bottom:30px; opacity: 0; transition: all .5s ease-in 10ms; }
js简写：
Zepto(function($) {
$(window).scroll(function() {
var scroHei = $(window).scrollTop(); //滚动的高度
if (scroHei > 300) {
$('#gotop').css({'opacity':'1'}).off().on('click',function(){$('body,html').scrollTop(0)});
} else {
$('#gotop').css({'opacity':'0'});
};
});
});