温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

bootstrap怎么设置页面回到顶端悬停提示

发布时间:2021-09-23 18:58:30 来源:亿速云 阅读:175 作者:小新 栏目:开发技术

这篇文章将为大家详细讲解有关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: 113px;left: 90%;margin-left: 40px;border: 1px solid #a38a54;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怎么设置页面回到顶端悬停提示”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI