给WordPress博客添加返回顶部/底部的教程

应用介绍

今天给大家分享下站壳网返回顶部那块的制作教程，其实也不难，主要是用到html、css和一些jq代码。

效果图如下图所示：

废话不多说，我们开始教程：

首先我们把下面的html代码添加到主题footer.php文件的</body>上面：

 
 
 
 
 


 

  

   
微信
   
   
  </>
 </>
</>
</></>
<>可以看到在右侧按钮上面是有>标签上面，加载>
<link rel=\"stylesheet\" href=\"https://at.alicdn.com/t/font_1557485_rig7wtgjqd.css\" rel=\"external nofollow\"  />



Icon图标


如果你的博客有Icon图标样式，可以不用添加上面的代码，用自己的图标


然后我们添加js代码，将下面代码添加到footer.php文件的</body>上面：
[removed]
 $(window).scroll(function() {
  var scroll_top = $(window).scrollTop();
  if(scroll_top >= 200) {
   $(\".gotop\").fadeIn();
  } else {
   $(\".gotop\").fadeOut();
  }
 });
 $(\"#top\").click(function() {
  $(\"html,body\").finish().animate({
   \"scrollTop\": $(\".top\").offset().top
  }, 500);
 });
 $(\"#footer\").click(function() {
  $(\"html,body\").finish().animate({
   \"scrollTop\": $(\".bottom\").offset().top
  }, 500);
 });
 $(\'.wechat\').click(function() {
  $(\'.gotop-pop\').toggle();
 });
 $(\'.gotop-pop-box-close\').click(function() {
  $(\'.gotop-pop\').hide()
 });
[removed]

以上代码依赖jquery，请确保你的博客已经加载jquery文件。
最后就是css样式了， 将下面代码添加到header.php文件的</head>上面，也可以添加到主题的样式文件内，一般是style.css这个文件。（为了方便二次修改，css样式代码没有压缩，代码比较长，可以直接点击复制）
/*
* ------------------------------------------------------------------------------
* 返回顶部样式
* ------------------------------------------------------------------------------
*/

.gotop {
 position: fixed;
 bottom: 0;
 right: 0;
 margin: 30px;
 display: none;
 overflow: hidden;
 border-radius: 4px;
 border: 1px solid #eee;
}

.gotop a {
 display: block;
 padding: 10px 13px;
 background-color: #fff;
 transition: all .3s ease;
 color: #888;
 background: #fff;
 border-bottom: 1px solid #eee;
 text-decoration: none;
 cursor: pointer;
}

.gotop a:hover {
 color: #fff;
 background: #2c63ff;
 box-shadow: -3px 2px 10px -2px #2c63ff;
 transform: translateY(-3px);
 border: 0
}

.gotop a:last-child {
 border: 0
}

.gotop i {
 font-size: 18px
}

.gotop-pop {
 position: fixed;
 width: 100%;
 height: 100%;
 background: #00000030;
 display: none;
 top: 0;
 transition: all .3s;
}

.gotop-pop-main {
 position: relative;
 max-width: 600px;
 margin: 10% auto;
 padding: 15px;
 animation: fadeinB .6s infinite;
 -moz-animation: fadeinB .6s infinite;
 /* Firefox */
 -webkit-animation: fadeinB .6s infinite;
 /* Safari and Chrome */
 -o-animation: fadeinB 1s infinite;
 /* Opera */
 animation-iteration-count: 1;
 -webkit-animation-iteration-count: 1;
 /* Safari 和 Chrome */
}

.gotop-pop-box {
 background: #fff;
 padding: 20px;
 text-align: center;
}

.gotop-pop-box h3 {
 text-align: center;
}
.gotop-pop-box-close {
 position: absolute;
 right: 0;
 top: 0;
 font-size: 24px;
 color: #aaa;
}
@keyframes fadeinB {
 0% {
  transform: translateY(20px);
  opacity: 0;
  filter: Alpha(opacity=0);
 }
 100% {
  transform: translateY(0px);
  opacity: 1;
  filter: Alpha(opacity=1);
 }
}

.fadeinB {
 animation: fadeinB .6s infinite;
 -moz-animation: fadeinB .6s infinite;
 /* Firefox */
 -webkit-animation: fadeinB .6s infinite;
 /* Safari and Chrome */
 -o-animation: fadeinB 1s infinite;
 /* Opera */
 animation-iteration-count: 1;
 -webkit-animation-iteration-count: 1;
 /* Safari 和 Chrome */
}

教程到此就结束了，完成以上步骤后，去网站前端看看效果吧，如果有疑问可以加入我们的WordPress交流群。
WordPress建站交流群：8424781