javascript - JQuery 片段不会一直触发，只是有时触发

Question

我使用在 GitHub 上找到的一个简单脚本为 WP 构建了一个插件。该插件工作正常，因为它将 JS 加载到网站的非管理页面。

然而，JS 仅在某些地方触发。

脚本应该找到所有内部链接并使它们平滑地滚动到页面上的目标位置。

这是网站上的一个很好的示例页面:http://bigbrownbeaver.net/have-me-build-your-site/

在左侧页面的最底部，有一个指向页面顶部的链接。当你点击它时，这个插件的 JS 会触发，它会平滑地滚动到顶部。然而……

当您单击页面上的任何其他内部链接时，(在页面顶部，两个深色列中的任何一个内部都有相当多的链接)同样的脚本不会触发？？？

几天来我一直试图寻找答案，但我不知所措。有人可以和我一起追查吗？这是插件的完整代码:

<?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

我认为这可能是因为“返回页面顶部”链接在其 href 中只有 anchor :

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

而其他人有完整的 URL:

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

如果您查看 Javscript，您会发现该插件只查找以哈希值开头的 anchor 。这就是 ^= 的意思，例如

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

如果您将 "http://bigbrownbeaver.net/have-me-build-your-site/#1" 替换为 "#1" 那么那些也应该有效。