[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

top_btn.png

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

[Rails] Button to return to the top of the page
[Ruby on Rails] Button to return to top
The process of introducing Vuetify to Rails
[Rails] Talk about paying attention to the return value of where
[Rails] How to change the page title of the browser for each page
[Rails] Read the RSS of the site and return the contents to the front
How to decorate the radio button of rails6 form_with (helper) with CSS
Add empty data to the top of the list
[Rails] How to change the column name of the table
[Rails] How to get the contents of strong parameters
I want to return the scroll position of UITableView!
9 Corresponds to the return value
Install multiple submit buttons in Rails View to get the value of the pressed button
Back to top button made only with Javascript (rails, haml)
Delete all the contents of the list page [Ruby on Rails]
Let's summarize how to extend the expiration date of Rails
[Rails] How to display the list of posts by category
[Rails] Where to be careful in the description of validation
[Rails] Check the contents of the object
Explanation of the order of rails routes
Check the migration status of rails
How to return Rails API mode to Rails
[Rails] How to get the URL of the transition source and redirect
The return specification of compareTo can afford without going to the reference
[Rails / Heroku / MySQL] How to reset the DB of Rails application on Heroku
What to do if the Rails page doesn't appear in Rails tutorial 1.3.2
[Rails] How to omit the display of the character string of the link_to method
I tried to make the "Select File" button of the sample application created in the Rails tutorial cool
From pulling docker-image of rails to launching
Display text on top of the image
The secret to the success of IntelliJ IDEA
[Rails] About the error when displaying the screen due to the autofocus of the form
The identity of params [: id] in rails
[Rails] How to use the map method
part of the syntax of ruby ​​on rails
How to implement more than one top page in Rails breadcrumb trail
Strict_loading function to suppress the occurrence of N + 1 problem added from rails 6.1
How to determine the number of parallels
How to switch the display of the header menu for each transition page
[Rails] Change the label name of f.label
[CircleCI] I was addicted to the automatic test of CircleCI (rails + mysql) [Memo]
How to sort the List of SelectItem
Output of the book "Introduction to Java"
Fix the view screen of the post page
How to solve the local environment construction of Ruby on Rails (MAC)!
[Rails] The cause of not being able to post was in form_with
[Ruby On Rails] How to search the contents of params using include?
[Rails] Articles for beginners to organize and understand the flow of form_with
How to make the schema of the URL generated by Rails URL helper https
[Rails] How to solve the time lag of created_at after save method
Change the save destination of the image to S3 in the Rails app. Part 2
[swift] How to control the behavior when the back button of NavigationBar is pressed
[Ruby on Rails] How to make the link destination part of the specified id
[Ruby on Rails] Rails tutorial Chapter 14 Summary of how to implement the status feed
Introduce Docker to the development environment and test environment of existing Rails and MySQL applications
[Rails] When transitioning to a page with link_to, move to the specified location on the page
How to make a unique combination of data in the rails intermediate table
[Ruby on Rails] How to Japaneseize the error message of Form object (ActiveModel)
[Rails] How to decide the destination by "rails routes"
Short URL to the App Store developer page
[Order method] Set the order of data in Rails