本文摘自PHP中文网,作者尚,侵删。
bootstrap设置页面回到顶端悬停提示方法如下:
1、首先在body中添加“返回顶部”按钮
1 2 3 4 5 6 | < body >
< div class = "go-top" >
< div class = "arrow" ></ div >
< div class = "stick" ></ div >
</ div >
</ body >
|
2、css 的定义
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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、按钮默认不可见,当滚动页面到一定高度后,按钮出现
1 2 3 4 5 6 7 8 9 10 11 | $( 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如何设置页面回到顶端悬停提示的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap有哪几种导航
bootstrap 怎么关闭弹出框
如何解决bootstrap导航条不跳转的问题
bootstrap是一款软件吗
bootstrap如何消除浮动
springboot怎么用bootstrap
bootstrap如何兼容ie6
bootstrap如何使用路径分页标签
bootstrap组件怎么使用方法
为什么不用bootstrap
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap如何设置页面回到顶端悬停提示