WordPress博客加上JS效果的返回顶部

信息的爆棚使得网页内容越来越丰富，网页越来越长，而导航栏一般在顶部，那么浏览者一直按上下顺序浏览，浏览到网页到底部之后，想要到其它分类下面看看，该怎么操作呢？

一般的浏览者会用到这两种方法，第一用看网页已经看得眼花的双眼找到鼠标然后在移动鼠标去找那个网页边边上15像素的该死的滚动条，然后将鼠标左键按住，拉上去。第二，滚动滚轮吧，一个门户网一般需要滚动个6-10下，如果是一个像我这样的博客，而作者有没有用more标签的习惯，一页放上去20篇文章，那么你大约需要滚动鼠标滚轮30下才能返回到顶部导航栏！天啊！当然还有第三种方法：按键盘上的home键，这是一个快捷键，但是大部分普通浏览者却并不知道。

那么说到这里，我们可以意识到小小的一个“返回顶部”，其实是网页用户体验中很重要的一项，现在越来越多的网页包括手机PAD客户端等都用上了这个辅助功能，网页设计者们越来越重视用户体验，我们看到它在往好的方向发展。

很多朋友的wordpress博客主题制作者们都已经加上了这个功能，我的这个主题也有这个功能，只是比较弱化，我重新加上去了一个利用JS实现平滑的返回顶部效果，来看一看：

第一步：下载这个JS文件

下载这个 js 文件 gototop.js 并上传到你的网站服务器（一般放在主题文件夹下面）
点击下载gototop.js文件

第二步：页面代码

在下面主题文件 footer.php 底下加上这段代码：

<script src="js文件存放地址/gototop.js" type="text/javascript" charset="utf-8"></script >
<div id="scroll"><a href="javascript:void(0)" onclick="goto_top()" title="返回顶部">TOP</a></div>

其中”js文件存放地址/gototop.js”指的就是第一步中你上传 js 文件的绝对位置。

第三步：修改样式

主题文件 style.css 文件中加入以下样式：

/*返回顶部*/
#scroll {display:block; width:30px; margin-right:-380px;
position:fixed;
right:50%;
top:90%;
_margin-right:-507px;
_position:absolute;
_margin-top:30px;
_top:expression(eval(document.documentElement.scrollTop));
}
#scroll a {
display:block;
float:right;
padding:9px 5px;
cursor: pointer;
background-color:#444;
color:#fff;
border-radius:5px;
text-decoration: none;
font-weight:bold;
}
#scroll a:hover {
background-color:#333;
color:#669900;
text-decoration: none;
font-weight:bold;
}

大功告成，剩下就是你根据你博客主题的宽度来设定一下margin-right:-380px这个值，以及修改按钮的配色、大小之类的，做好之后的效果本站就可以看到。