首页 学习教程网站建设正文

​bootstrap官网中的返回顶部的实现步骤

元之本 网站建设 2020-04-04 07:59:22 403 0 bootstrap

bootstrap官网中的返回顶部的实现步骤:这里使用的jquery的scrollUp插件,当然了,事先bootstrap和jquery也要布置好。

一、网站footer中添加如下脚步

<script src="https://cdn.jsdelivr.net/gh/markgoodyear/scrollup@2.4.1/dist/jquery.scrollUp.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.15/dist/js/site.min.js"></script>

二、自定义css中添加如下代码

/**bootstrap返回顶部**/
#scrollUp {background-color:#777;color:#eee;font-size: 0px;line-height:1;text-align:center;text-decoration:none;bottom:20px;right:200px;overflow:hidden;width:46px;height:46px;border:none;opacity:.8;}
#scrollUp:hover{background-color:#333;}
@media (max-width: 767px){#scrollUp{bottom:100px;right: 20px;}}

这样就算完成了,想要改变位置可以修改css样式中的bottom和right值就行了。效果如下图:

​bootstrap官网中的返回顶部的实现步骤  bootstrap 第1张



版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

本文链接:http://yuyubebe.cn/2020/04/869/

评论

«   2020年8月   »
12
3456789
10111213141516
17181920212223
24252627282930
31
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
扫描即可关注我们