一、引入字体文件和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>
这样返回顶部和直达底部的功能就实现了
文件存放目录如下
图 1
相关文章:
文件素材下载:
链接:https://pan.baidu.com/s/1F_QY3pbk_owDJNPc1fer_w
提取码:6o3a
联系方式:
- 微信:34419369
- QQ: 34419369
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心