Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 :)

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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) ...
});
share|improve this answer
    
Sorry, not ignoring you, I'll get back to ya tomorrow and let you know how it goes... Holidays and such :) –  Klyde Nov 22 '12 at 19:28
    
Alright... I tried all versions of your solution that I possibly could... Still didn't work. The including on all pages but admin pages is fine, but the plugin doesn't work, and the code DOES work in other instances.. Any more suggestions? –  Klyde Nov 24 '12 at 6:52
    
Do you have an example page on your site that's using the script? One I can take a look at? –  Stephen Nov 24 '12 at 14:51
    
Ok, I updated what's working to place the code on the pages. Including it from another file hasn't worked even one time! But I did get the conditional statement to work correctly. You can now go to any page on bigbrownbeaver.net and there is a link in the lower left corner to scroll to the top, but it doesn't scroll smoothly... –  Klyde Nov 25 '12 at 3:29
    
The link isn't firing the JavaScript as far as I can tell. Try changing to <a rel="nofollow" href="#">Return to top of page</a> –  Stephen Nov 25 '12 at 3:43
show 5 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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