方法很简单，步骤如下：
1.“控制台”-“布局”-“修改 HTML”，同时请保存原有模板以防不测！
2.搜索 ]]></b:skin>，在它上面添加如下代码：
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
3.搜索</body>,在他上面添加如下代码：padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
<a href="#" id="backtotop"><img src="图片地址" alt="back to top" /></a>
然后保存就可以了，我的博客就是使用这种方法，还有一种是平滑滚动到页面顶部的方法，效果是非常绚丽，使用jquery特效，但是需要加载一些脚本，我怕影响网页加载速度所以就没有选用，不过还是把方法提供给大家，先测试一下效果。平滑滚动到页面顶部的方法：
1.“控制台”-“布局”-“修改 HTML”，勾选“扩展小窗口部件模板”，同时请保存原有模板以防不测！
2.搜索 ]]></b:skin>，在它上面添加如下代码：
#kaluhur{
right:20px;
bottom:20px;
position: fixed;
}
3.搜索</head>,在他上面添加如下代码：right:20px;
bottom:20px;
position: fixed;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('a[href*=#luhur]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
4.搜索<body>,将它替换为<body id="luhur">。<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('a[href*=#luhur]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
5.搜索</body>,在他上面添加如下代码：
<div id='kaluhur'>
<a href='#luhur' title='Luhur'><img src='图片地址'/></a>
</div>
6.保存完工。<a href='#luhur' title='Luhur'><img src='图片地址'/></a>
</div>
你可以看到网页从下面到顶部平滑的滑动，很炫的一个效果，最后附上一些back to top图标打包供大家下载：下载
后记：其实返回到页面顶部也不需要很麻烦的，我一般都是用HOME键的，返回到顶部很方便。
相关文章：
|
本文地址：http://oceanban.blogspot.com/2010/07/back-to-topback-to-top-bloggercom.html 原创文章如转载，请注明链接： 转自OceanBan的空间 |
11 评论:
学习了，一直想要这个东西
但是看到用home能达到功能，一想，不需要上面的了。
我一直火星了。。。
@LOST
有好多东西都是可有可无的，这个也是。
最簡單的方式就是不要把BLOG版面搞得像蓋樓一樣。
@Kenji Kee
你的页面是相当简单啊,我感觉我的还算可以.
加载JS对速度的影响很小的,十来K的东西,比图片还快一些
而且,Google的jQuery的文件很多人都有使用,这意味着浏览者在载入页面时有这个文件的缓存的可能性很高,又提高了速度
@Pstrey
要是这么说的话以后会考虑使用特性，我曾见到一位朋友Blogger全部是jquery特性，相当不错。
哈哈，你的这不够我的酷。
我的是竖导航
而且我的可以设置密码
详见大沢佑香图片下面有下载链接，但是要知道密码才可以下载，嘿嘿。
还有我的文章可以收缩，你可以试着点击一个标签，在点击[+/-] 就可以收缩了。
还有我上面的PP是随机刷新的，F5一次就换另外一图。
@18enter
你的很经典啊,尤其是上面的随机图,那是相当的赏心悦目啊.
侧边栏加个widget就可以 http://widgetsforfree.blogspot.com/2008/10/top-of-page-icon-link.html
没有G*FW的和谐blogger可能不比WP逊色。这么方便的产品，竞争。。。
发表评论