0

I want a "Read on" link that moves to another part of the page when clicked.

I understand the HTML bit and I have even used some nice scrolling.

It works. But when implemented breaks part of my theme. The slider image is gone and the H1 text is all bunched up to the left.

Here is what I added to my child functions.php, in order to inject the javascript into the head area.

/**
 * Smooth scroll 
 */

add_action('wp_head', 'wpse_43672_wp_head');
function wpse_43672_wp_head(){
    //Close PHP tags 
    ?>
    //ADD YOUR PLAIN CODE HERE

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
    </script>

    //STOP YOUR PLAIN CODE HERE

    <?php //Open PHP tags
}

How is this half breaking my template, but still scrolling nicely? Is there a better way?

Edit:

OK now I'm trying to enqueue the script.

Here is what I have in my child functions.php (have the js in a file). The template loads OK but he scroll isn't animating. I can't see an error in the inspector.

function wpb_adding_scripts() {
wp_register_script('scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array('jquery'));
wp_enqueue_script('scroll');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Final edit:

Here is the solution I used...

I added this to the child functions.php

function wpb_adding_scripts() {
wp_register_script('scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array('jquery'));
wp_enqueue_script('scroll');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

I added this to scroll.js file in a js folder in my child dir.

(function($){

        $(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

})(jQuery);

I was in fact getting a js error and needed to add a noConplict wrapper.

3
  • I am sure you are including jQuery script (probably different versions) twice. Use wp_enqueue_script instead to add jQuery.
    – Robert hue
    Commented May 19, 2015 at 5:24
  • Remove the line <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> and try
    – m4n0
    Commented May 19, 2015 at 5:25
  • That fixes the page, but the smooth scrolling doesn't work. Clicking the link just teleports me to the new location. Commented May 19, 2015 at 5:27

1 Answer 1

2

jQuery is already loaded with WordPress, so you won't need <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

When using jQuery with WordPress, you'll likely require no-conflict wrappers : https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

There are likely JS errors being outputted in your browser console, so giving us more info on errors can prove useful as well.

There is definitely a better way - starting with this guide for enqueuing Javascript should give you solid grounds to understanding WP scripts a little better : http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

7
  • OK I removed the call to src jquery. It fixed the page, but broke the smooth scroll. I had two parts. The part to inject the code to the head, and the code to enable the javascript. Should both be enqueued? Commented May 19, 2015 at 5:35
  • You could try replace $ with jQuery or wrap the entire function in a noConflict wrapper. Might need to see some console log details to get a better idea of what's not working. Commented May 19, 2015 at 5:43
  • Updated with my enqueue attempt. Thanks for the help. Commented May 19, 2015 at 10:26
  • Nice one! Try using this codex.wordpress.org/Function_Reference/… instead of plugins_url and verify by inspecting page source, that your scroll script is actually getting enqueued. Commented May 19, 2015 at 14:09
  • One step ahead:) I had already made it that far. I updated the edit. The page loads fine but no scrolling. I can confirm that the .js file is loading from the right location and no other js errors are thrown:/ Commented May 19, 2015 at 23:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.