jquery实现返回顶部直达底部的功能。

学习大纲

在网站中经常会用到返回顶部的这个功能，这个功能其实很简单，我们可以按照下面的代码进行操作，很快就会实现，下面说一下实现的步骤。

一、引入字体文件和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.在php文档或html文档中引入该文件

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>标题</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
    
</body>
</html>

1.3.准备jquery文件并引入html文档。

1.3.1.在根目录新建js文件夹

1.3.2.把font-awesome.min.css存在该js文件夹中

1.3.3.在php文档或html文档中引入该js文件

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>标题</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
    <script src="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代码（代码字体为红色粗体）。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>标题</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
    <!--下面的topdiv元素中可以删除-->
    <div class="topdiv">
        <p id="ele">元素</p>
    </div>
    <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.准备css代码（代码字体为红色粗体）。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>标题</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
<style>
    .topdiv {
        height: 2000px;
    }
    .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%;
    }
</style>   
</head>
<body>
    <!--下面的topdiv元素中可以删除-->
    <div class="topdiv">
        <p id="ele">元素</p>
    </div>
    <div class="qfl-totop">
        ...
    </div>
    <script src="js/jquery-1.12.4.js"></script>
</body>
</html>

2.3.准备js代码（代码字体为红色粗体）。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>标题</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
<style>
    ...
</style>   
</head>
<body>
    <!--下面的topdiv元素中可以删除-->
    <div class="topdiv">
        <p id="ele">元素</p>
    </div>
    <div class="qfl-totop">
        ...
    </div>
    <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>

首页 > 前端项目 > jquery实现返回顶部直达底部的功能。

学习大纲

在网站中经常会用到返回顶部的这个功能，这个功能其实很简单，我们可以按照下面的代码进行操作，很快就会实现，下面说一下实现的步骤。

一、引入字体文件和jquery文件。

1.1.准备字体文件。

1.2.准备css文件并引入html文档。

1.3.准备jquery文件并引入html文档。

1.43.准备图片素材。

二、准备代码。

2.1.准备html代码（代码字体为红色粗体）。

2.2.准备css代码（代码字体为红色粗体）。

2.3.准备js代码（代码字体为红色粗体）。

这样返回顶部和直达底部的功能就实现了

文件存放目录如下

图 1

相关文章：

文件素材下载：

联系方式:

Leave a Reply 取消回复