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.