Question

我在此网站的主页上存在javascript冲突：http://antimatterweblab.info/ws

使用javascript有两件事：

预订系统的日期选择器，由一个名为“预订”的插件创建，很高兴使用Wordpress自己的javascript

屏幕右侧的导航栏，允许用户导航到主页的不同部分，该部分使用此代码以及Google的jQuery库：

<!-- animate to section-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function goToByScroll(id){
        $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
    }

    var t = $("#anchor-point").offset().top;

    $(document).scroll(function(){
        if($(this).scrollTop() > t)
        {   
            $('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
            $('#voice3').css({"border-bottom":"2px solid #2e375b"});
            $('#voice3').css({"border-bottom":"2px solid #2e375b"});
            $('#voice3').css({"border-bottom":"2px solid #2e375b"});
            $('#voice3').css({"border-bottom":"2px solid #2e375b"});
        }
    });
</script>

然后动画使用此HTML：

<a href="javascript:void(0)" onClick="goToByScroll('house')"><div class="navcirc"></div></a>

...但是，通过使用Google图书馆，日历无法使用，如果没有Google图书馆，则goToByScroll功能无效。

我已经尝试过的事情

使用插件让Wordpress使用Google的库没有任何区别 - 除非单独调用Google库，否则滚动功能仍然无效

我在其他地方读过的建议说要将代码包装成：

(function($){

$(document).ready(function(){
 //document ready code here
});

})(jQuery);

...我解释为这样做的意思：

<!-- animate to section-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
(function($){
        function goToByScroll(id){
            $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
        }

        var t = $("#anchor-point").offset().top;

        $(document).scroll(function(){
            if($(this).scrollTop() > t)
            {   
                $('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
            }
        });
})(jQuery);
</script>

这最终会禁用日历和滚动条。

我不知道我在做什么。任何帮助将不胜感激！

非常感谢！

Answer 1

看起来jquery在页面上使用了备用快捷方式。

而不是$快捷方式，它被定义为jQuery。

像这样更改脚本并再试一次：

    function goToByScroll(id){
            jQuery('html,body').animate({scrollTop: jQuery("#"+id).offset().top},'slow');
        }

Wordpress Javascript冲突;总js初学者

1 个答案: