[JAVA] Bouton [Rails] pour revenir en haut de la page
introduction
· Développer des applications à l'aide de Rails ・ Installez un bouton pour revenir en haut à partir du bas des vues
Ruby 2.5.7 Rails 5.2.4.4
couler
・ Introduction de gem'jquery-rails ''
・ Préparez un bouton pour passer à l'action (des caractères ou des polices géniales peuvent être utilisés à la place d'images)
-Ecrire un bouton dans la vue et l'ajouter en css et javascript
Image du bouton
Préparez-vous correctement ...
Stocker les fichiers image sous app / actifs / images
Ajouter aux vues
<span id="top-btn">
<a href="#">
<%= image_tag asset_path('top_btn.png'), class: 'top-btn' %>
</a>
</span>
-Asset_path ('~~') lit les images sous app / assets / images
Ajouté aux fichiers css et js
.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();
});
});
Que faire si vous ne voulez pas le voir dans son état initial (en haut de la page)?
$(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();
});
});
L'affichage des boutons est défini dans les instructions if de fadeIn et fadeOut ...
la fin
Il devrait être possible de mettre en œuvre avec la description ci-dessus ... Si vous avez des questions ou si l'explication est incorrecte (fausse, etc.), veuillez nous en informer dans les commentaires.
Nous espérons que vous trouverez cela utile.