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中有锚点：

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

其他人有完整的网址：

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

如果您查看Javscript，您会看到该插件仅查找以哈希开头的锚点。这就是^=的含义，例如

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

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

JQuery Snippet不会一直触发，只是偶尔

1 个答案: