Question

行，

所以我有这种奇怪的情况。我正在尝试将Paul Underwood的简单平滑滚动脚本（http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery）包含在Wordpress 3.8.1上运行的Wordpress单页面中。但是，平滑滚动不起作用。

该脚本在JFiddle上完美运行，我已经检查过它是否有错误，但它是一个简单的复制粘贴，所以这应该不是问题。我很确定我已经在functions.php中正确排队了（是的，我也注册了jQuery）。它应该在noConflict中工作。

那我在这里错过了什么？如果这是一个愚蠢的小错误，我不会感到惊讶......

无论如何，先谢谢大家：）

HTML：

<a href="#main"><img class="arrow" src="<?php bloginfo('stylesheet_directory'); ?>/images/arrow-down.png" alt="scroll down"></a>

剧本：

jQuery(document).ready(function($) {

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

var target = this.hash,
    $target = $(target);

$('html, body').stop().animate({
  'scrollTop': $target.offset().top
}, 900, 'swing', function () {
  window.location.hash = target;
    });
});
});

});

functions.php

function my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_style( 'my-style', get_stylesheet_uri() );
wp_register_script( 'my-script', get_template_directory_uri().'/js/my-script.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'my-script' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

Answer 1

由于您的代码表示您有两个doc ready处理程序，并且您可以删除内部doc ready第一行更好：

jQuery(document).ready(function($) { // keep it, its better.

   $(document).ready(function() { //<---remove this line and its closing

所以最终的代码应该是：

jQuery(document).ready(function($) {
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
            $target = $(target);

        $('html, body').stop().animate({
              'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
              window.location.hash = target;
        });  // end of animate
    });  // end of click
}); // end of doc ready

Answer 2

Wordpress默认使用jQuery代替$。尝试将所有$替换为jQuery。

jQuery(document).ready(function() {
    jQuery('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = jQuery(target);

        jQuery('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });  // end of animate
    });  // end of click
}); // end of doc ready

试试这个。

编辑：哦，我刚刚看到您将$作为该函数的参数。我的错。

但是你检查过你是否可能包含两次jQuery？

Answer 3

好的，所以我想通了，伙计们。

正如我预测的那样，这是一些愚蠢的小事。

有遗物

body{overflow-x: hidden}

在我的样式表中。

这就是一直在拖我的 - 删除了这条线，现在一切正常。

感谢您的帮助： - ）

Wordpress 3.8：jQuery无法正常工作 - 没有错误

3 个答案: