這篇文章將為大家詳細講解有關(guān)bootstrap怎么設(shè)置頁面回到頂端懸停提示,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
bootstrap設(shè)置頁面回到頂端懸停提示方法如下:
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定位,讓按鈕始終出現(xiàn)在右下角,通過設(shè)定left:90%可以使按鈕在右方出現(xiàn),但又不會太緊貼滾動條。
3、按鈕默認不可見,當(dāng)滾動頁面到一定高度后,按鈕出現(xiàn)
$(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);});});
關(guān)于“bootstrap怎么設(shè)置頁面回到頂端懸停提示”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
網(wǎng)頁名稱:bootstrap怎么設(shè)置頁面回到頂端懸停提示-創(chuàng)新互聯(lián)
瀏覽地址:http://chinadenli.net/article26/despjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、軟件開發(fā)、虛擬主機、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容