[JAVA] Schaltfläche [Schienen], um zum Anfang der Seite zurückzukehren
Einführung
· Entwickeln Sie Anwendungen mit Rails ・ Installieren Sie eine Schaltfläche, um von unten in den Ansichten nach oben zurückzukehren
Ruby 2.5.7 Rails 5.2.4.4
fließen
・ Einführung von `gem'jquery-Rails' `
・ Bereiten Sie eine Schaltfläche vor, um Maßnahmen zu ergreifen (Zeichen oder Schriftarten können anstelle von Bildern verwendet werden).
-Schreiben Sie eine Schaltfläche in der Ansicht und fügen Sie sie CSS und Javascript hinzu
Schaltflächenbild
Richtig vorbereiten ...
Speichern Sie Bilddateien unter App / Assets / Images
Zu Ansichten hinzufügen
<span id="top-btn">
<a href="#">
<%= image_tag asset_path('top_btn.png'), class: 'top-btn' %>
</a>
</span>
-Asset_path ('~~') liest Bilder unter App / Assets / Images
Zu CSS- und JS-Dateien hinzugefügt
.top-btn {
position: fixed;
right: 30px;
bottom: 40px;
}
.top-btn a {
width: 50px;
height: 50px;
}
$(function() {
$('#top-btn a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 1000);
event.preventDefault();
});
});
Was ist, wenn Sie es nicht im Ausgangszustand (oben auf der Seite) sehen möchten?
$(function() {
var topBtn = $('#top-btn a');
topBtn.hide();
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
topBtn.fadeIn(1000);
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body, html').animate({
scrollTop:0
}, 1000);
event.preventDefault();
});
});
Die Anzeige der Schaltflächen wird in den if-Anweisungen von fadeIn und fadeOut ... festgelegt.
das Ende
Es sollte möglich sein, mit der obigen Beschreibung zu implementieren ... Wenn Sie Fragen haben oder wenn die Erklärung falsch ist (falsch usw.), teilen Sie uns dies bitte in den Kommentaren mit.
Wir hoffen, Sie finden dies hilfreich.
Recommended Posts