If you can't read in Chinese, please use Translate tool in right sidebar. Translate tool is provided by Google.
现在大部分的网站都在使用Go Top这个按钮来返回顶部，用习惯后如果没有这个按钮就觉得各种不方便。
进入Blogger后台，选择模板。
先备份模板到本地，以防出现问题时无法恢复原版模板。（红色框内）
备份好后，点击修改HTML进入修改画面。注意：这里的修改会直接影响博客页面的显示效果，大家随意修改的话后果自负哦。
在<head></head>之间添加下列代码
【if ( $(this).scrollTop() > 450){】指的是当页面下拉超过450的时候
在<body></body>之间添加下列代码
预览模板（这里只能看到页面会不会显示出Top按钮，并不能实现返回顶部的功能），如果没有问题就保存模板。然后就可以在页面上看到效果了。
更多相关内容请使用文章末尾的标签进行查找。
现在大部分的网站都在使用Go Top这个按钮来返回顶部，用习惯后如果没有这个按钮就觉得各种不方便。
进入Blogger后台，选择模板。
先备份模板到本地，以防出现问题时无法恢复原版模板。（红色框内）
备份好后，点击修改HTML进入修改画面。注意：这里的修改会直接影响博客页面的显示效果，大家随意修改的话后果自负哦。
<!-- go top -->【scrollTop:0】指的是返回到距离顶部的位置
<!-- Js控制 -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
$("#gotop").click(function(){
jQuery("html,body").animate({
scrollTop:0
},700);
});
$(window).scroll(function() {
if ( $(this).scrollTop() > 450){
$('#gotop').fadeIn("fast");
} else {
$('#gotop').stop().fadeOut("fast");
}
});
});
</script>
<!-- 以下是样式设置 -->
<style type='text/css'>
#gotop { /* 控制Top按钮的css */
z-index: 1;
display: none;
position: fixed;
right: 30px; /* 距离右边的距离 */
bottom: 25px;/* 距离底部的距离 */
padding: 10px 10px; /* 文字显示位置 */
font-size: 25px;/* 文字大小 */
background: #777;/* 背景颜色 */
color: #000000;/* 文字颜色 */
cursor: pointer;
}
</style>
<!-- go top end -->
【if ( $(this).scrollTop() > 450){】指的是当页面下拉超过450的时候
在<body></body>之间添加下列代码
不想在手机上显示的代码：【<center>︿</center>】是向上的箭头，不需要的可以删除。
<!-- go top -->
<b:if cond='data:blog.isMobile'> <!-- 在mobile不显示 -->
<b:else/>
<div id='gotop' ><center>︿</center>Top</div>
</b:if>
<!-- go top end -->
在手机上显示时只需要一下的代码，注意要配合修改上一步的CSS代码进行调整：
<div id='gotop' ><center>︿</center>Top</div>
预览模板（这里只能看到页面会不会显示出Top按钮，并不能实现返回顶部的功能），如果没有问题就保存模板。然后就可以在页面上看到效果了。
更多相关内容请使用文章末尾的标签进行查找。
No comments:
Post a Comment