Question

I built a plugin for WP using a simple script I found on GitHub. The plugin works fine, as it loads the JS onto non-admin pages of the site.

The JS, however, only fires in certain places.

The script is supposed to find all internal links and make them scroll smoothly to the target destination on the page.

Here is a great example page on the site: http://bigbrownbeaver.net/have-me-build-your-site/

At the very bottom of the page on the left side, there is a link to the top of the page. When you click on it, the JS from this plugin fires, and it scrolls smoothly to the top. However…

When you click on any of the other internal links on the page, (there are quite a few of them toward the top of the page, inside either of the two dark columns) This same script DOESN’T fire ???

I’ve tried to find answers for days now, and I’m at a loss. Could someone chase this down with me? Here’s the ENTIRE code for the plugin:

<?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
                    }, 800);

                }

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

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

    </script>

<?php }

}

Answer 1

I think it might be because the “Return to top of page” link only has the anchor in its href:

<a href="#wrap" rel="nofollow">...</a>

While the others have a full URL:

<a href="http://bigbrownbeaver.net/have-me-build-your-site/#1">...</a>

If you look at the Javscript, you’ll see the plugin is looking only for anchors that start with a hash. That’s what ^= means in, e.g.

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

If you replace "http://bigbrownbeaver.net/have-me-build-your-site/#1" with just "#1" then those should work, too.