JS插件未正确执行JS。尝试让所有内部链接都能顺畅地滚动

时间:2012-11-22 作者:Klyde

好吧我正在尝试为我的站点创建一个插件,在加载前端页面时,在head部分添加一个js片段。

js旨在为所有内部链接添加平滑滚动。

首先,插件确实可以很好地加载脚本。这是一段来自:https://github.com/alextrob/SmoothAnchors

其他使用该脚本的人似乎都认为它很好用!但我不能让它为我工作。

我对JS很陌生,所以如果我做了一些非常愚蠢的事情,我不会感到惊讶!但是,我的网站上没有滚动的链接。。。

以下是我的网站:http://bigbrownbeaver.net

以下是插件代码:

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

}
很高兴听到你们的消息:)

1 个回复
最合适的回答,由SO网友:Steve 整理而成

将JavaScript代码保存到插件目录中的单独文件中。然后使用此代码使用wp_enqueue_script() 作用

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

    }
}
显然,更换-YOURFILENAME- 使用您创建的文件名。

您可能还需要稍微修改JavaScript以符合jQuery noConflict wrappers. 您可以看到codex document here 有充分的解释。

编辑以显示jQuery noConflict包装器

你还需要改变-

$(document).ready(function() {
    $().smoothscrolling();
})
到这个-

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

结束