本文最后更新于 4807 天前，其中的信息可能已经有所发展或是发生改变。
自打网站换了个主题以后，访问起来最痛苦的事情就是需要滚动条拖来拖去的。今天终于给加上一个返回顶部的浮动图标代码，顺带分享下，最近写作热情高涨，苦于没有时间。顺带上图片一张，截图留念这个版本的皮肤。
代码使用很简单，只需要将HTML代码，和jQuery代码放入到网页的尾部即可。另外你可能还需要和我一样盗用人人网的返回顶部图片一张。
HTML代码
<div style="display:none;" class="back-to" id="toolBackTop">
<a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">
返回顶部</a>
</div>
jQuery代码
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var bt = $('#toolBackTop');
var sw = $(document.body)[0].clientWidth;
var limitsw = (sw - 840) / 2 - 80;
if (limitsw > 0){
limitsw = parseInt(limitsw);
bt.css("right",limitsw);
}
$(window).scroll(function() {
var st = $(window).scrollTop();
if(st > 30){
bt.show();
}else{
bt.hide();
}
});
})
</script>
本来还想问图标在哪里，拉到评论就看到了。
哈 盗用人人
谢谢分享
实用，多谢分享~~~
不知可否share一下这套简洁的膜板呢？？
还有，你的后台的文章管理的时候，在chrome下可以删除吗？ 会报js错误吗？
这个主题还有点没有修改完，修改完了可以放出来。
删除文章，我刚测试，没有问题呀？
那可能是我mac下chrome版本（16.0.912.12 dev）的问题了。。
另，期待你这简洁给力的主题~~~
我是Lion，不过Chrome版本是14的
有兼容问题阿、 在ie6下不能漂浮.
图标很好看，请继续写完教程。。。。小弟眼拙，实在看出来到底怎么使用，代码都放进去了，图片怎么调用？没效果啊哥们
你用firefox的firebug，看本站的css和网络就知道为啥图片没显示了。
啊~~博主，我的意思是只有代码，没有CSS代码。。不知道怎么固定图片之类的，我尝试把返回顶部那几个字换成图片调用代码，没成功啊，真的很想学习，谢谢你
说错了，不是CSS代码，你给的代码里有CSS属性了，但是还是没法调用出图片 额
这个，这个怎么解释呢，用firebug这个firefox插件，你就能看出来为啥不显示图片了。我如何教你呢~~~
.back-to .back-top {
background: url(“images/back-top.png”) no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 50px;
margin-left: 10px;
outline: 0 none;
text-indent: -9999em;
width: 50px;
噢，你是不是没写出CSS代码。。那我自己复制到CSS里面，然后HTML. JS代码全部放入FOOT.PHP，就可以了不？
是的
不成功啊。。。博主。。。SOS
没找到图片啊
图片是放在样式中的，你查看本站样式文件即可找到～
博主：在专业上的事需要向您请教请教，能给个Q吗？谢谢
博主：你好
我在我的网站上使用了你的这个代码，这个代码使用正常，但是网站上别的功能（switchTab）受到了影响，请问有什么好的解决办法吗？
ie6不生效的，博主出个兼容各个浏览器的方案吧
博主,您好,您的这个教程的方法很好,也很美观.但是我有些问题想请教您,谢谢了.我按照您的方法添加代码到源文件里的时候并没有生效.不知道是不是我方法不对.
我的是WordPress驱动,
我将以下代码添加到footer.php文件中
=============================
返VDE;顶部
$(document).ready(function () {
var bt = $(‘#toolBackTop’);
var sw = $(document.body)[0].clientWidth;
var limitsw = (sw – 840) / 2 – 80;
if (limitsw > 0){
limitsw = parseInt(limitsw);
bt.css(“right”,limitsw);
}
$(window).scroll(function() {
ript>
var st = $(window).scrollTop();
if(st > 30){
bt.show();
}else{
bt.hide();
}
});
})
==================================
将以下代码添加到style.css文件中
====================================
.back-to {
bottom: 35px;
overflow: hidden;
position: fixed;
right: 10px;
width: 110px;
z-index: 999;
}
.back-to .back-top {
background: url(“images/back-top.png”) no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 50px;
margin-left: 10px;
outline: 0 none;
text-indent: -9999em;
width: 50px;
}
.back-to .back-top:hover {
background-position: -50px 0
}
===========================
这么做并没有效果,图片也拷到相应目录了.请教您,问题出在哪呢?谢谢了.
不行是因为样式里有一个@import url( http://www.ccvita.com/usr/themes/ccvita/css/960.gs.css );，真怀疑楼主是抄袭的
楼上的各位注意了yle: none; OUTLINE-COLOR: invert; PADDING-LEFT: 0px; OUTLINE-WIDTH: 0px; PADDING-RIGHT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; FONT-SIZE: 100%; VERTICAL-ALIGN: ba seline; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px yle: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: 0px; WIDTH: 50px; DISPLAY: block; BACKGROUND: url(http://www.ccvita.com/usr/themes/ccvita/images/back-top.png) no-repeat 0px 0px; FLOAT: right; HEIGHT: 50px; MARGIN-LEFT: 10px
完整的css代码是
A {
COLOR: #3354aa; TEXT-DECORATION: none;BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OUTLINE-st
}
A:hover {
BORDER-BOTTOM: medium none; COLOR: #444
}
.back-to {
Z-INDEX: 999; POSITION: fixed; WIDTH: 110px; BOTTOM: 35px; OVERFLOW: hidden; RIGHT: 10px
}
.back-to .back-top {
TEXT-INDENT: -9999em; OUTLINE-st
}
.back-to .back-top:hover {
BACKGROUND-POSITION: -50px 0px
}
楼主告诉我们的css样式是不行的，因为他的css样式里还外链了一个 http://www.ccvita.com/usr/themes/ccvita/css/960.gs.css，这是我在调试他的样式里发现的
博主如此强大，，，求给Q 啊！！
很喜欢你这个代码高亮 能分享下吗
使用了jquery，不喜欢，喜欢纯粹一点的
我用的是谷歌博客，在网上找了一段代码，可是不管有没有滚动页面图片总是出现在右下方，不像回到顶部时就隐藏。能告诉我是原因吗？