效果图
一、引入字体文件和jquery文件。
1.1.准备字体文件。
1.1.1.在主题文件根目录下新建文件夹,起名为:fonts。(如果存在该文件夹,则忽略本条)。
1.1.2.下载好图标字体文件FontAwesome。
1.1.3.把图标字体文件放到根目录中的fonts文件夹中去。
1.2.准备css文件并引入html文档。
1.2.1.在主题文件根目录下新建文件夹,起名为:css。(如果存在该文件夹,则忽略本条)
1.2.2.把font-awesome.min.css存在该css文件夹中
1.2.3.在head.php文档中</head>上方引入该文件
<!doctype html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/font-awesome.min.css">
</head>
<body>
</body>
</html>
1.3.准备jquery文件并引入html文档。
1.3.1.在主题文件根目录下新建js文件夹。(如果存在该文件夹,则忽略本条)
1.3.2.把jquery-1.12.4.js存在该js文件夹中。(如果存在该文件,则忽略本条)
1.3.3.在footer.php文档中的</body>前引入该js文件
...
<script src="<?php bloginfo('template_directory'); ?>js/jquery-1.12.4.js"></script>
</body>
</html>
1.43.准备图片素材。
1.3.1.在根目录新建images文件夹。(如果存在该文件夹,则忽略本条)
1.3.2.把所需图片文件存在该images文件夹中。
1.3.3.备注:图片名称要和代码中的图片名称相符。
二、在主题中添加下面代码。
2.1.准备html代码(代码字体为红色粗体)。在footer.php中body结束标签前</body>加入下面html代码。代码如下
... <div class="qfl-totop"> <div class="btn"> <a href="#" class="btn-menu btn-bottom" title="直达底部"><i class="fa fa-angle-down" style="font-size:28px"></i></a> <a href="#" class="btn-menu btn-menu" title="联系我们"><i class="fa fa-commenting-o" style="font-size:24px"></i></a> <a href="#" class="btn-menu btn-wechat" title="联系我们"><i class="fa fa-wechat" style="font-size:24px;color:#09BB07"></i></a> <a href="#" class="btn-menu btn-top" title="返回顶部"><i class="fa fa-angle-up" style="font-size:28px"></i></a> </div> <div class="bottom-qrcode"> <h4>微信联系</h4> <div class="panel-body"> <img src="../images/qrcode.jpg" alt="微信二维码"> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> </body> </html>
2.2.在主题根目录中style.css文件添加下面css代码(代码字体为红色粗体)。
... /*返回顶部直达底部代码*/ .qfl-totop { position: fixed; width: 46px; text-align: center; bottom: 66px; right: 8px; } .qfl-totop .btn-menu { height: 44px; width: 100%; background-color: #ccc; border-radius: 2px; cursor: pointer; -webkit-box-pack: center; box-pack: center; line-height: 44px; transition: background .3s ease-in-out; -webkit-transition: background .3s ease-in-out; display: inline-block; text-decoration: none; font-size: 28px; color: #fff; position: relative; top: 15px; margin-bottom: 2px; } .qfl-totop .btn-menu:hover { background-color: #f44444; } .qfl-totop .bottom-qrcode { top: auto; bottom: 0; height: 158px; width: 128px; padding: 10px; margin: 0; right: 65px; left: auto; text-align: center; position: fixed; border: 1px solid rgba(0,0,0,0.3); border-radius: 6px; display: none; } .qfl-totop .bottom-qrcode h4 { font-size: 0.875rem; margin: 0.5rem 0; } .qfl-totop .bottom-qrcode img { width: 100%; }
2.3.在footer.php中的</body>前面加入js代码(代码字体为红色粗体)。代码要放在jquery-1.12.4.js文件的下方。
... <script src="js/jquery-1.12.4.js"></script> <script> jQuery(document).ready(function ($) { $('.btn-top').click(function(e) { $('html').scrollTop(0); e.preventDefault(); }); $('.btn-bottom').click(function(e) { var h = $(document).height() - $(window).innerHeight() $('html').scrollTop(h); e.preventDefault(); }); $('.btn-wechat').click(function () { var qrcode = $('.bottom-qrcode'); if (qrcode.css('display') == 'none') { qrcode.css('display', 'block'); } else if (qrcode.css('display') == 'block') { qrcode.css('display', 'none'); } }); }) </script> </body> </html>
这样wordpress网站返回顶部和直达底部的功能就实现了。
文件素材下载:
链接:https://pan.baidu.com/s/1F_QY3pbk_owDJNPc1fer_w
提取码:6o3a
联系方式:
- 微信:34419369
- QQ: 34419369
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心