站長(zhǎng)資訊網(wǎng)
bootstrap設(shè)置頁(yè)面回到頂端懸停提示方法如下：
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)在右下角，通過(guò)設(shè)定left:90%可以使按鈕在右方出現(xiàn)，但又不會(huì)太緊貼滾動(dòng)條。
3、按鈕默認(rèn)不可見(jiàn)，當(dāng)滾動(dòng)頁(yè)面到一定高度后，按鈕出現(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); }); });
推薦：bootstrap入門(mén)教程
