這篇文章將為大家詳細講解有關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怎么設置頁面回到頂端懸停提示”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。