ホームページ > 記事 > ウェブフロントエンド > ブートストラップでページを上部のホバープロンプトに戻す設定方法
ブートストラップでページを上部のホバープロンプトに戻す設定方法
- 尚オリジナル
- 2019-07-27 16:12:354828ブラウズ
ブートストラップ設定ページは、次のように上部のホバー プロンプト メソッドに戻ります:
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;
}ボタンが常に右下隅に表示されるように固定位置を使用します。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 入門チュートリアル
以上がブートストラップでページを上部のホバープロンプトに戻す設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。