现在很多网站或者博客中，都有回到顶部的功能，这样可以让浏览者很方便的回到顶部菜单，选择自己想浏览的其他信息。
当然，刚安装完 WordPress 后是没有该功能的，如何添加置顶按钮呢？这里就以本博客用的 WordPress 自带的主题“Twenty Fourteen”来说明，下面就来说说添加的详细步骤。
第一步，上传资源，包括置顶图片和需要的js文件。
把置顶图片上传到 themes/twentyfourteen/images/ 下，把所需 js 文件上传到 themes/twentyfourteen/js/ 下，资源包括：top-move.png、easing.js、jquery.cslider.js、jquery.min.js 和 move-top.js。如果手头没有的朋友可以在本文最后下载压缩包即可。
第二步，引用上传的 js 资源。
打开 themes/twentyfourteen/header.php 文件，在 <head></head> 中添加下面代码：
- <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>
- <script src="<?php echo get_template_directory_uri(); ?>/js/move-top.js"></script>
- <script src="<?php echo get_template_directory_uri(); ?>/js/easing.js"></script>
- <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.cslider.js"></script>
第三步，在模板中引用上传的图片资源。
打开 themes/twentyfourteen/footer.php 文件，在</footer> 标签之间添加如下代码：
- <!-- scroll_top_btn -->
- <script type="text/javascript">
- $(document).ready(function() {
- var defaults = {
- containerID: 'toTop',
- containerHoverID: 'toTopHover',
- scrollSpeed: 1200,
- easingType: 'linear'
- };
- $().UItoTop({ easingType: 'easeOutQuart' });
- });
- </script>
- <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
- <!--end scroll_top_btn -->
第四步，修改主题样式文件。
打开 themes/twentyfourteen/style.css，在最后添加如下样式：
- /*****toTop*****/
- #toTop {
- display: none;
- text-decoration: none;
- position: fixed;
- bottombottom: 10px;
- rightright: 10px;
- overflow: hidden;
- width: 44px;
- height:44px;
- border: none;
- text-indent: 100%;
- background: url(images/top-move.png) no-repeat rightright top;
- }
- /*****toTop*****/
第五步，访问博客查看是否添加成功。
访问博客，滚动博客页面，可以看到右下角会出现添加的置顶按钮。如果没有效果，清理浏览器的缓存文件，再次尝试。
资源下载：百度云共享下载 | 360云盘下载（提取码：fb0a）
Good Luck！
