[JAVA] [Ruby on Rails] Schaltfläche, um nach oben zurückzukehren
Ziel
Entwicklungsumgebung
ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina
Annahme
- Wenn Sie ▶ ◯◯ auswählen, werden Erklärungen angezeigt. Ich hoffe, Sie können sich darauf beziehen, wenn Sie sich nicht sicher sind.
- Login-Umgebung mit Gerät erstellen
- Posting-Funktion, die nur angemeldete Benutzer ausführen können
- Nachbearbeitungsfunktion (Aktualisieren, Löschen)
Sie müssen die oben genannten Funktionen nicht haben.
fließen
1 Vorbereitung der Fotos 2 Ansicht bearbeiten 3 Bearbeiten Sie CSS 4 Bearbeiten Sie die js-Datei (beim Hinzufügen von Animationen zum Bildlauf)
Vorbereitung der Fotos
Bitte bereiten Sie ein Bild wie dieses vor.
Dieses Bild wurde übrigens mit dem iPad erstellt. Sie können es also gerne verwenden.
Bitte speichern Sie die Bilddatei unter App / Assets / Images.
Ansicht bearbeiten
Da ich es diesmal auf allen Seiten anzeigen möchte, werde ich es an der folgenden Stelle beschreiben.
erb:app/views/layouts/application.html.erb
<body>
<%= yield %>
<span id="back">
<a href="">
<%= image_tag asset_path('arrow.jpg'), data: {"turbolinks"=>false}, class: "arrow" %>
</a>
</span>
</body>
Ergänzung [image_tag asset_path ()]
Sie können Bilder unter App / Assets / Bilder laden.
Supplement [data: {"turbolinks" => false}]
Verhindert Fehlfunktionen von Turbolinks.
CSS bearbeiten
app/application.css
#back {
position: fixed;
right: 20px;
bottom: 20px;
}
.arrow{
width: 50px;
height: 50px;
}
Ergänzung [Position: fest;]
Die anzuzeigende Position wird durch Position festgelegt: fest;
Js-Datei bearbeiten
Bitte installieren Sie gem'jquery-Rails '.
Klicken Sie mit der Maus, um die Animation zu aktivieren.
app/assets/javascripts/application.js
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});
Supplement [$ ('# back a'). On ('click', Funktion (Ereignis)]
$ ('. Selector name'). On ('click', Funktion (Ereignis) {
Die Verarbeitung wird ausgeführt, wenn ein Ereignis auftritt
});
Supplement [$ ('body, html'). Animate]
$ ('Selektorname'). Animieren ({
Zu ändernder Eigenschaftsname: Wert ändern
}, Animationsbetriebszeit);
Recommended Posts
Supplement [data: {"turbolinks" => false}]
Verhindert Fehlfunktionen von Turbolinks.
CSS bearbeiten
app/application.css
#back {
position: fixed;
right: 20px;
bottom: 20px;
}
.arrow{
width: 50px;
height: 50px;
}
Ergänzung [Position: fest;]
Die anzuzeigende Position wird durch Position festgelegt: fest;
Js-Datei bearbeiten
Bitte installieren Sie gem'jquery-Rails '.
Klicken Sie mit der Maus, um die Animation zu aktivieren.
app/assets/javascripts/application.js
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});
Supplement [$ ('# back a'). On ('click', Funktion (Ereignis)]
$ ('. Selector name'). On ('click', Funktion (Ereignis) {
Die Verarbeitung wird ausgeführt, wenn ein Ereignis auftritt
});
Supplement [$ ('body, html'). Animate]
$ ('Selektorname'). Animieren ({
Zu ändernder Eigenschaftsname: Wert ändern
}, Animationsbetriebszeit);
Recommended Posts
app/application.css
#back {
position: fixed;
right: 20px;
bottom: 20px;
}
.arrow{
width: 50px;
height: 50px;
}
Ergänzung [Position: fest;]
Die anzuzeigende Position wird durch Position festgelegt: fest;
Js-Datei bearbeiten
Bitte installieren Sie gem'jquery-Rails '.
Klicken Sie mit der Maus, um die Animation zu aktivieren.
app/assets/javascripts/application.js
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});
Supplement [$ ('# back a'). On ('click', Funktion (Ereignis)]
$ ('. Selector name'). On ('click', Funktion (Ereignis) {
Die Verarbeitung wird ausgeführt, wenn ein Ereignis auftritt
});
Supplement [$ ('body, html'). Animate]
$ ('Selektorname'). Animieren ({
Zu ändernder Eigenschaftsname: Wert ändern
}, Animationsbetriebszeit);
Recommended Posts
app/assets/javascripts/application.js
$(function() {
$('#back a').on('click',function(event){
$('body, html').animate({
scrollTop:0
}, 800);
event.preventDefault();
});
});
Supplement [$ ('# back a'). On ('click', Funktion (Ereignis)] $ ('. Selector name'). On ('click', Funktion (Ereignis) { Die Verarbeitung wird ausgeführt, wenn ein Ereignis auftritt });
Supplement [$ ('body, html'). Animate] $ ('Selektorname'). Animieren ({ Zu ändernder Eigenschaftsname: Wert ändern }, Animationsbetriebszeit);
Recommended Posts