http://www.inpofire.com

                                                                  【大发快3官方网址】bootstrap如何设置页面回到顶端悬停提示-Bootstrap教程

                                                                  bootstrap设置页面回到顶端悬停提示方法如下:

                                                                  1、首先在body中添加“返回顶部”按钮

                                                                  <body><div class="go-top"><div class="arrow"></div><div class="stick"></div></div></body>

                                                                  2、css 的定义

                                                                  div .go-top {display: none;opacity: 0.6;z-index: 999999;position: fixed;bottom: 113p(x;left: 90%;margin-left: 40px;border: 1px solid #a38a5,4;width: 38px;height: 38px;background-color: #eddec2;border-radius: 3px;cursor: pointer;}div .go-top:hover {opacity: 1;filter: alpha(opacity=100);}div .go-top div .arrow {position: absolute;left: 10px;top: -1px;width: 0);height: 0;border: 9px solid transparent;border-bottom-color: #cc3333;}div .go-top div .stick {position: absolute;left: 15px;top: 15px;width: 8px;height: 14px;display: block;background-color: #cc3333;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;}

                                                                  使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。

                                                                  3、按钮默认不可见,当滚动页面到一定高度后,按钮出现

                                                                  $(function() {$(window).scroll(function() {if ($(window).scrollTop() > 1000)$('div.go-top').show();else$('div.go-top').hide();});$('div.go-top').click(function() {$('html, body').animate({scrollTop: ]0}, 1000);});});

                                                                  推荐:bootstrap入门教[程

                                                                  以上就是bootstrap如何设置页面回到顶端悬停提示的详细内容,更多请关注php中文网其它相关文章!

                                                                1. 微信
                                                                2. 分享php中文网最新课程二维码相关标签:bootstrap
                                                                3. 本文原创发布php中文网
                                                                4. 郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:pdf如何整篇自动翻译-常见问题
                                                                  下一篇:没有了