​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张

© 版权声明
THE END
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容