Trying to make a fixed "scroll to top button"

Shapely
1

Hello and thank you very much for this beautiful theme!
This theme has like everything I need, except from the “scroll to top” button which I would like to appear just after someone started scrolling the page. Just to be clear, I’m trying to achieve something like the button seen in Dazzling theme.

In order to obtain so, I’m trying to work on the child theme of Shapely, but so far I failed.
I was wondering if anyone could please tell me how to write a proper javascript to obtain a fade-in effect for this button.
I am not used to JavaScript, as until now the only changes I ever did to templates were in CSS. I just followed the indications provided here

So, by now, I’ve styled my button like this, and added this property to “style.css” file in child theme:

a.btn.btn-sm.fade-half.back-to-top.inner-link {
  display: none;
  position: fixed;
  border-radius: 5px;
  border-color: #fff;
  background: rgba(0,0,0,0.6);
  -webkit-transition: background-color 0.1s linear;
  -moz-transition: background-color 0.1s linear;
  -o-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}

After, I registered a new function in the “function.php” file, as follows:

add_action('wp_enqueue_scripts', 'mybutton');

function mybutton() {
	wp_register_script('bottone', get_stylesheet_directory_uri(). '/bottone.js', array('jquery'), '1.1', true);
}

So my js document name is “bottone.js”.
Unfortunately, I am not able to understand how to write correctly the javascript suggested in the topic linked above.
I cannot understand what it’s going on in the JavaScript part, so I cannot understand why this is not working.
Could please anyone help me?

Thank you very much for all the support.

2

hey there

there are many ready-made plugins to use on the site, including this one: WPFront Scroll Top – WordPress plugin | WordPress.org
If you prefer to write something yourself its welcome but usually such requests are not supported, anything custom you want to add in the theme is up to you, there are many solutions in the web to utilize :slight_smile:

Best regards