Quantcast
Channel: WordPress.org Forums » All Posts
Viewing all articles
Browse latest Browse all 134392

PODxt on "How to add javascript codes?"

$
0
0

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


Viewing all articles
Browse latest Browse all 134392

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>