So setzen Sie die Seite beim Hover-Prompt im Bootstrap wieder auf den Anfang-Bootstrap-Tutorial-php.cn

So setzen Sie die Seite beim Hover-Prompt im Bootstrap wieder auf den Anfang

尚

Freigeben： 2019-07-27 16:12:35

Original

4949 Leute haben es durchsucht

So setzen Sie die Seite beim Hover-Prompt im Bootstrap wieder auf den Anfang

So kehren Sie zur obersten Hover-Eingabeaufforderung auf der Seite mit den Bootstrap-Einstellungen zurück:

Fügen Sie zunächst „Zurück nach oben“ hinzu „Schaltfläche im Textkörper

<body>
<div class="go-top">
<div class="arrow"></div>
<div class="stick"></div>
</div>
</body>

Nach dem Login kopieren

2. CSS-Definition

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;
}

Nach dem Login kopieren

Verwenden Sie eine feste Positionierung, damit die Schaltfläche immer in der unteren rechten Ecke angezeigt wird. Durch die Einstellung left:90% kann die Schaltfläche angezeigt werden Befestigen Sie die Bildlaufleisten nicht zu eng.

3. Die Schaltfläche ist standardmäßig unsichtbar, wenn die Seite auf eine bestimmte Höhe gescrollt wird.

$(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);
});
});

Nach dem Login kopieren

Empfohlen: Bootstrap-Erste-Schritte-Tutorial

Das obige ist der detaillierte Inhalt vonSo setzen Sie die Seite beim Hover-Prompt im Bootstrap wieder auf den Anfang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!