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

效果图如下图所示：

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

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

<div class=\"gotop\"> <a id=\"top\"><i class=\"iconfont icon-arrow-up\"></i></a> <a href=\"<?php echo $gotop[\'qq_url\']?>\" rel=\"external nofollow\" rel=\'nofollow\' class=\"uk-display-block b-b\"><i class=\"iconfont icon-qq\"></i></a> <a class=\"wechat\"><i class=\"iconfont icon-wechat\"></i></a> <a href=\"https://www.baidu.com/baidu?word=wptoo%E6%95%99%E7%A8%8B%E7%BD%91\" rel=\"external nofollow\" rel=\'nofollow\'><i class=\"iconfont icon-resonserate-fill\"></i></a> <a id=\"footer\"><i class=\"iconfont icon-arrow-down\"></i></a> </div> <div class=\"gotop-pop\"> <div class=\"gotop-pop-main\"> <div class=\"gotop-pop-box uk-overflow-hidden\"> <h3>微信</h3> <i class=\"iconfont icon-icon-test25 gotop-pop-box-close\"></i> <img src=\"https://we7cc-cn.oss-accelerate.aliyuncs.com/2020/02/2020020408254925.jpg\" /> </div> </div> </div>

可以看到在右侧按钮上面是有Icon图标的，所以我们还需要加载一个Icon图标，把下面的一行代码添加到header.php的</head>标签上面，加载Icon样式。

<link rel=\"stylesheet\" href=\"https://at.alicdn.com/t/font_1557485_rig7wtgjqd.css\" rel=\"external nofollow\" />

Icon图标

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

然后我们添加js代码，将下面代码添加到footer.php文件的</body>上面：

<script> $(window).scroll(functiоn() { var scroll_top = $(window).scrollTop(); if(scroll_top >= 200) { $(\".gotop\").fadeIn(); } else { $(\".gotop\").fadeOut(); } }); $(\"#top\").click(functiоn() { $(\"html,body\").finish().animate({ \"scrollTop\": $(\".top\").offset().top }, 500); }); $(\"#footer\").click(functiоn() { $(\"html,body\").finish().animate({ \"scrollTop\": $(\".bottom\").offset().top }, 500); }); $(\'.wechat\').click(functiоn() { $(\'.gotop-pop\').toggle(); }); $(\'.gotop-pop-box-close\').click(functiоn() { $(\'.gotop-pop\').hide() }); </script>

以上代码依赖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 */ }

教程到此就结束了，完成以上步骤后，去网站前端看看效果吧。