1

我使用我在 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 }

}
4

1 回答 1

3

我认为这可能是因为“返回页面顶部”链接仅在其 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"用 just "#1"then 替换那些也应该工作。

于 2012-11-25T17:18:03.310 回答