Hi, I spent 8 hours now reading everything I could find on javascript and wordpress, but everything I read was either incomplete or paradoxal with other tutorials.
I'm trying to add a scroll to top arrow link and image on all my pages. I'm using the 2013 theme with a child theme for testing purpose located here: \wp-content\themes\twentythirteen-child
In this folder I have a folder called js which contains 3 files:
scrollup.js
scrollup.css
arrow.png
Here is scrollup.js content:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
scrollup.css content:
.scrollup {
width: 40px;
height: 40px;
opacity: 0.3;
position: fixed;
bottom: 50px;
right: 100px;
display: none;
text-indent: -9999px;
background: url('arrow.png') no-repeat;
}
.scrollup:hover {
opacity: 1;
}
I added to my functions.php file, which is located in my twentythirteen-child folder:
<?php
function my_scripts_method() {
wp_register_script('scrollup', get_stylesheet_directory_uri() . '/js/scrollup.js', array('jquery'),'', true);
wp_enqueue_script('scrollup');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>
<?php
function wpb_adding_styles() {
wp_register_style('scrollup', get_stylesheet_directory_uri() . '/js/scrollup.css');
wp_enqueue_style('scrollup');
}
add_action( 'wp_enqueue_styles', 'wpb_adding_styles' );
?>
And last but not least, I added this html code in one of my pages to create the scroll to top link:
<a href="#" class="scrollup">Scroll</a>
I'll find a way to implement this link in every page of the site later, right now I'm just focusing on one page. And I can't get it to work at all. Nothing happens.
What am I doing wrong here?? I'm going crazy here.
Thanks in advance