[Rails] Button to return to the top of the page
Introduction
・ Develop applications using Rails ・ Install a button to return to the top from the bottom of views
Ruby 2.5.7 Rails 5.2.4.4
flow
・ Introduced ``` gem'jquery-rails'` `` ・ Prepare a button to take action (characters or font-awesome can be used instead of images) -Write a button in view and add it to css and javascript
Button image
Prepare appropriately ...
Store image files under app / assets / images
Add to views
<span id="top-btn">
<a href="#">
<%= image_tag asset_path('top_btn.png'), class: 'top-btn' %>
</a>
</span>
・ Asset_path ('~~') reads images under app / assets / images
Added to css and js files
.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();
});
});
What if you don't want to see it in the initial state (at the top of the 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();
});
});
The button display is set in the if statement of fadeIn and fadeOut ...
the end
It should be possible to implement with the above description ... If you have any questions or if the explanation is incorrect (wrong, etc.), please let us know in the comments.
We hope you find this helpful.
Recommended Posts