JS Plugin not executing the js correctly. Trying to make all internal links scroll smoothly

Question

all right... I am attempting to create a plugin for my site that adds a js snippet to the head section when a front end page loads.

The js is meant to add smooth scrolling to all internal links.

First off, the plugin does load the script just fine. It's a snippet from: https://github.com/alextrob/SmoothAnchors

Everyone else that uses the script seems to think it works great! But I can't get it to work for me.

I am VERY new to JS so I wouldn't be surprised if i am doing something really dumb! But, none of the links on my site scroll...

Here is my site: http://bigbrownbeaver.net

here is the plugin code:

<?php
/*
Plugin Name: Smooth Scrolling Links
Plugin URI: http://bigbrownbeaver.net
Description:Adds a js smooth scrolling effect to all links on your site that point to other parts of a page or post
Version: 1.0
Author: Aaron
Author URI: http://bigbrownbeaver.net/newsletter/
*/

/*  Copyright 2013  Aaron > BigBrownBeaver.Net

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as 
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

//load required script



add_action('wp_head', 'smooth_scrolling_links');

function smooth_scrolling_links() { ?>
<?php if ( !is_admin() ) { ?>

    <script type="text/javascript">
    (function($) {
            $.fn.smoothscrolling = function() {

                function scrollto(destination, hash) {

                    // Change the hash first, then do the scrolling.
                    var scrollmem = $(document).scrollTop();
                    window.location.hash = hash;
                    $(document).scrollTop(scrollmem);
                    $("html,body").animate({
                        scrollTop: destination
                    }, 400);

                }

                if (typeof $().on == "function") {
                    $(document).on('click', 'a[href^="#"]', function() {

                        var href = $(this).attr("href");

                        if ($(href).length == 0) {

                            var nameSelector = "[name=" + href.replace("#", "") + "]";

                            if (href == "#") {
                                scrollto(0, href);
                            }
                            else if ($(nameSelector).length != 0) {
                                scrollto($(nameSelector).offset().top, href);
                            }
                            else {
                                // fine, we'll just follow the original link. gosh.
                                window.location = href;
                            }
                        }
                        else {
                            scrollto($(href).offset().top, href);
                        }
                        return false;
                    });
                }
                else {
                    $('a[href^="#"]').click(function() {
                        var href = $(this).attr("href");

                        if ($(href).length == 0) {

                            var nameSelector = "[name=" + href.replace("#", "") + "]";

                            if (href == "#") {
                                scrollto(0, href);
                            }
                            else if ($(nameSelector).length != 0) {
                                scrollto($(nameSelector).offset().top, href);
                            }
                            else {
                                // fine, we'll just follow the original link. gosh.
                                window.location = href;
                            }
                        }
                        else {
                            scrollto($(href).offset().top, href);
                        }
                        return false;
                    });
                }
            };
        })(jQuery);

        $(document).ready(function() {
            $().smoothscrolling();
        });
    </script>
<?php }

}

Love to hear from you guys :)

Answer 1

Save your JavaScript code out to a separate file within your plugin directory. Then use this code to load the file using the wp_enqueue_script() function.

function smooth_scrolling_links() {

    if ( !is_admin() ) { // Don't load if in the admin screen

        wp_enqueue_script('Smooth-Scolling-Links', plugin_dir_url(__FILE__) .'-YOURFILENAME-.js');

    }
}

Obviously replace the -YOURFILENAME- with the file name that you created.

You may also need to modify your JavaScript slightly to comply with the jQuery noConflict wrappers. You can see the codex document here with a full explanation.

Edit to show jQuery noConflict wrapper

You also need to change -

$(document).ready(function() {
    $().smoothscrolling();
})

To this -

jQuery(document).ready(function(){
    jQuery(#smoothscrolling) ...
});