wordpress怎么实现返回顶部直达底部的功能

学习大纲

在wordpress网站中也会 经常 用到返回顶部的这个功能，前面我们说了静态网页实现这个功能，今天来演示下wordpress网站怎么实现这个功能，下面说一下实现的步骤。

效果图

一、引入字体文件和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开发 > wordpress功能实现 > wordpress怎么实现返回顶部直达底部的功能