首頁 > web前端 > Bootstrap教程 > bootstrap如何設定頁面回到頂端懸停提示

bootstrap如何設定頁面回到頂端懸停提示

發布: 2019-07-27 16:12:35
原創
4849 人瀏覽過

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)
$(&#39;div.go-top&#39;).show();
else
$(&#39;div.go-top&#39;).hide();
});
$(&#39;div.go-top&#39;).click(function() {
$(&#39;html, body&#39;).animate({scrollTop: 0}, 1000);
});
});
登入後複製

推薦:bootstrap入門教學

以上是bootstrap如何設定頁面回到頂端懸停提示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板