Something that is sexy, modern, and comes up with some soft effect.

And surely you have noticed that this website has a little arrow to go up on the right side, but that it only appears when you have already exceeded a percentage of the page when scrolling.

Okay?

Ok, now that you’ve quickly scrolled down the page, seen the go to top button, and clicked back here, I’m going to explain how you can put one on your website.

Confess it, you have done it; And on top of that, I made you smile. 😀

And as you know, I am one of those who, if I can, do not use any plugin and put my hand to the code.

Do we get into flour?

How To Insert A Go To Top Button With Code

Although today themes like Astra Theme come standard, there are many that still don’t include it. And you are interested in including it by code.

It is something simple, if you follow the steps to the letter.

I’m going to give you everything “muscadito”.

Here it is going to be necessary to access your server by FTP, since you have to create a file inside the folder of your Child Theme .

Step 1. Upload The Necessary Js Files.

Download these three files:

• main.js
• modernizr.js –> This is already provided by many themes, and it is not usually necessary to download or upload it. It is standard, and any version will serve you.
• cd-top-arrow.svg –> The image icon that we will use as “top up”.

If they don’t download directly, right-click and click “Save Link As…”

Upload all three files to wp-content/themes/yourchildtheme/js/

If the js folder does not exist inside your Child Theme, create it.

If you edit the main.js file , you will be able to change some settings of the back to top effect.

//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
	//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
	offset_opacity = 1200,
	//duration of the top scrolling animation (in ms)
	scroll_top_duration = 700;

The offset variable is used to indicate when the “button” will be activated. In this case when lowering 300px.

At first it will come out as half transparent, and if you mouse over it, it becomes opaque. That transparency is what we defined in offset_opacity .

And finally, scroll_top_duration is where you specify how long the back-up animation will last. If you use excessively long texts, you may be interested in raising this value.

Step 2. Edit The Functions.Php File

Now we have to call these javascript files  that we have created, so that they load with the web, and add the effect of going back to the top.

For that we are going to add these lines to your functions.php file that is in wp-content/themes/yourchildtheme/

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'hormi_enqueue_scripts_styles' );
function hormi_enqueue_scripts_styles() {

	wp_enqueue_script( 'modernizr-min', get_stylesheet_directory_uri() . '/js/modernizr.js', array( 'jquery' ), '', true );
	wp_enqueue_script( 'back_to_top', get_stylesheet_directory_uri() . '/js/main.js', array( 'jquery' ), '', true );
}

//* Añadimos el botón antes de </body>
add_action ( 'wp_footer', 'hormi_back_to_top' );
function hormi_back_to_top() {
   echo '<a href="#0" class="cd-top">Top</a>';
}

With this we will have the button working on our website.

Step 3. Add Some Style

You have the button working, but it’s barely visible, and it’s ugly.

So add some style.

Copy and paste these lines in the styles.css file that is in wp-content/themes/yourchildtheme/

/* --------------------------------
      Back to Top
-------------------------------- */
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(34, 121, 196, 0.8) url(js/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #2279C4;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 60px;
  }
}

You can change the color by substituting the one on line 38. Just delete #2279C4 , and put in the color that works for you.

If you want the round button, you can add below line 26, and before the }, the following: « border-radius: 50%; «

As you can see, it is nothing more than applying CSS styling, so that it is more in line with our theme.

Is It Easy Or Not To Add A Go To Top Button?

Also note that in this case it is not necessary to use the Genesis Framework .

This is valid for any topic. The hooks used are standard WordPress.

The only thing that you see I have insisted on, is to use a Child Theme , so that when you update you don’t lose these changes.

Putting a button to return to the top is a simple resource, which facilitates the navigation of our website, and how you see something not very complicated to implement.

And you, what tricks do you use to improve the use of your website?