Question

我在http://jsfiddle.net/HRewD/17/

中按照我的意愿工作的jsFiddle中的示例

但是。当我尝试在wordpress中实现时，没有平滑的滚动链接：（

我觉得它可能与$'有关，所以我将它们全部从$更改为jQuery，这通常有效，但不是这次。

我也尝试过使用jQuery.noConflict（），但没有运气。

我目前正在本地工作，因此目前无法在线链接到该网站。

我有一些其他插件可以完美地调用jQuery，所以jQuery 1.6.4肯定会加载。

我意识到我没有给予很多工作，但我真的很感激任何一种帮助我解决这个问题的方法。因为此时我很难过。

所以，如果有人可以伸出援助之手，我将不胜感激。

更新

我一直在研究这个问题，并且已经进一步缩小了这个问题，但我仍然在努力绕过所有这些问题。我在控制台中收到一个错误，这是因为一个看不见的字符（我猜是由JSFiddle创建的？！）。我在代码中的不同位置运行了一个简单的警报功能，它显示正常。

截至目前，我没有注意到safari，FF和Opera的开发者工具的控制台或“资源”部分中的任何错误，但仅在chrome中我收到错误

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

仅在点击下一个或上一个错误后，我才会收到此错误，错误左侧的数字会在每次点击后以2为增量增加。

我的HTML

<div id="home-block">
    <div class="current">Content Goes here</div>
    <div>A box of content</div>
    <div>Content</div>
    <div>More content...</div>
</div>

<div id="nav-right">
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
</div>

我的css：

#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}

.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}

#nav-right{
    position: fixed;
    right: 15px;
    top: 35%;
}

.current {
    color: red;
}

我的Js：

<script type="text/javascript">

$jq(document).ready(function($jq) {
    var scrollTo = function(yoza) {
        $jq('html, body').animate({
            scrollTop: $jq(yoza).offset().top
       }, 300);
    };

    $jq('#next').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if ($jqcurrent.index() != $jq('#home-block > div').length - 1) {
            $jqcurrent.removeClass('current').next().addClass('current');
            scrollTo($jqcurrent.next());
        }
    });
    $jq('#prev').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if (!$jqcurrent.index() == 0) {
           $jqcurrent.removeClass('current').prev().addClass('current');
            scrollTo($jqcurrent.prev());
        }
    });
});

</script>

我的脚本在functions.php（wordpress）中调用：

function my_scripts_method() {


wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
wp_enqueue_script( 'jquery' );

wp_register_script('smooth-scroll', get_bloginfo('stylesheet_directory').'/js/jquery.scrollTo-1.4.2-min.js', false);
wp_enqueue_script('smooth-scroll');

wp_register_script('tabbedcontent', get_bloginfo('stylesheet_directory').'/js/tabbedContent.js', array('jquery'), '1.0', false);
wp_enqueue_script('tabbedcontent');

wp_register_script('jquery-tools', ("http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"), false);
wp_enqueue_script('jquery-tools');

wp_register_script('dock-menu', get_bloginfo('stylesheet_directory').'/js/dock-interface.js', array('jquery'), false);
wp_enqueue_script('dock-menu');

    }
add_action('wp_enqueue_scripts', 'my_scripts_method');

Here is a working example in JS Fiddle as I provided earlier

我也在JS Bin和静态html页面中工作，但不在wordpress中。

我尝试过的事情：

我确保Jquery库实际上正在使用此函数加载：

<script type="text/javascript">
if (typeof jQuery != 'undefined') {  
    // jQuery is loaded => print the version
    alert(jQuery.fn.jquery);
}
</script>

以1.6.4返回。我发现这个版本似乎来自jquery工具脚本。

我已经取消激活所有其他插件，以防有些人可能正在加载他们自己的jQuery库。我已经在我的functions.php文件中隔离了我正在加载的脚本：我试图注册wordpress'包含JQ并且只加载1.6.4，只加载1.7.1，加载两者，加载none并希望wordpress'包括JQ库将诀窍以及重新安排他们加载的顺序，但这些都没有让我对这个问题有所了解。

我已经测试了变量是否存在并且可以从前面提到的我的JS脚本中获得，并且返回的脚本确认了变量的存在。

我尝试使用：

玩$符号

var $jq = jQuery.noConflict();

并将所有实例更改为$ jq以及jQuery，但都没有做任何事情。

我还尝试更改＃next，＃prev，.post变量的名称，认为它们可能与名称相同的其他变量发生冲突，但没有。

我检查了文件路径，阅读了大量论坛帖子

其他值得一提的事情：

我有其他jQuery模块在这些相同的库中工作吗？没有控制台错误？这可能没有用，但我注意到的一点是，在点击上一个或下一个之后，我的屏幕将会拉伸，以便页面右侧的滚动条现在被隐藏，但会立即重新出现。

这可能是过度杀戮但我觉得提供源可能是一个好主意（仍然在本地工作，无法链接到该网站）：

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width">
<title>scroll 2 | </title>



<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/post.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/tabbedContent.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/scrollable-gallery.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/the-system.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/dock.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/system-hover-grid.css" />





<link rel="pingback" href="http://localhost:8888/xmlrpc.php" />



<link rel="alternate" type="application/rss+xml" title=" &raquo; Feed" href="http://localhost:8888/feed/" />
<link rel="alternate" type="application/rss+xml" title=" &raquo; Comments Feed" href="http://localhost:8888/comments/feed/" />
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/comment-reply.js?ver=20090102'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/Twentyten-templates/js/jquery.scrollTo-1.4.2-min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/Twentyten-templates/js/tabbedContent.js?ver=1.0'></script>
<script type='text/javascript' src='http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/Twentyten-templates/js/dock-interface.js?ver=3.3.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='scrollTo' href='http://localhost:8888/scrollto/' />
<meta name="generator" content="WordPress 3.3.1" />
<link rel='canonical' href='http://localhost:8888/scroll-2/' />
<style type="text/css">
body.custom-background { background-color: #fff; }
</style>




</head>







<div id="wrapper" class="hfeed">

    <div id="header">

        <div id="masthead">

    <div id="pagemenu" role="navigation">
            </div>

            <div id="branding" role="banner">
                            <div id="site-title">
                    <span>
                        <a href="http://localhost:8888/" title="" rel="home"></a>
                    </span>
                </div>
                <div id="site-description"></div>



                        <img src="http://americandreamenergysystem.com/wp-content/uploads/2010/10/ADES-Header1.png" width="0" height="0" alt="" />

            </div><!-- #branding -->
<nav class="top">
<div class="nav-contain">
<ul class="left">
<li><a href="http://localhost:8888/">Home</a></li> 
<li> <a href="http://localhost:8888/who-we-are/">About Us</a> </li> 
<li><a href="http://localhost:8888:your-system/ ‎">Your System</a></li> 
</ul>
<ul class="right">
<li> <a href="http://localhost:8888/pyp/">Your Plan</a> </li> 
<li><a href="http://localhost:8888/faq//">FAQ</a></li> 
<li><a href="http://localhost:8888/customer-service/">Contact Us</a></li> 
</ul> 
</div>


</nav>
<div id="nav-accent"></div>

            </div><!-- #access -->
        </div><!-- #masthead -->
    </div><!-- #header -->

<img src="http://localhost:8888/wp-content/themes/Twentyten-templates/images/big-circle-v7.png" id="round-overlay">


    <div id="main">
<body class="page page-id-3259 page-template page-template-scroll2-php logged-in custom-background">

</div>






<style>
p.copy {
display:none;
}

#colophon {
    border-top: 0px solid #000000;
    }

 article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }


#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}

.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}

#nav-right{
    position: fixed;
    right: 15px;
    top: 35%;
}

.current {
    color: red;
}

.temp-box {
width: 100%;
height: 100px;
display: block;
}

</style>



<div id="AD-Logo"></div>
<div class="temp-box">spacer</div>
<div id="home-block">
    <div class="current">Content Goes here</div>
    <div>A box of content</div>
    <div>Content</div>
    <div>More content...</div>
</div>

<div id="nav-right">
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
</div>



        <div id="container" class="one-column">


            <div id="content" role="main">


                <div id="post-3259" class="post-3259 page type-page status-publish hentry">
                    <h1 class="entry-title">scroll 2</h1>
                    <div class="entry-content">
                        <p>a great sailor was not made by smooth waters..</p>
                                                <span class="edit-link"><a class="post-edit-link" href="http://localhost:8888/wp-admin/post.php?post=3259&amp;action=edit" title="Edit Page">Edit</a></span>                    </div><!-- .entry-content -->
                </div><!-- #post-## -->




            </div><!-- #content -->
        </div><!-- #container -->

    </div><!-- #main -->


    <div id="footer" role="contentinfo">




        <div id="colophon">

<div id="copy-foot">
<p class="copy">Copyright &copy; All rights reserved 2012</p>
</div>
<div id="negatron"></div>




            <div id="footer-widget-area" role="complementary">

                <div id="first" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-5">            <div class="textwidget"><a id="footer-text"  href="http://americandreamenergysystem.com/">Home</a><br/>
<a id="footer-text"  href="http://americandreamenergysystem.com/?page_id=276">Who We Are</a></div>
        </li>                   </ul>
                </div><!-- #first .widget-area -->

                <div id="second" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-21">           <div class="textwidget"><a id="footer-text"  href="http://americandreamenergysystem.com/?page_id=895">How We Do It<br/>
<a id="footer-text"  href="http://americandreamenergysystem.com/?page_id=46">Your Energy System</a></div>
        </li>                   </ul>
                </div><!-- #second .widget-area -->

                <div id="third" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-22">           <div class="textwidget"><a id="footer-text" href="http://americandreamenergysystem.com/?page_id=184">Pick Your Plan</a><br/>
<a id="footer-text" href="http://americandreamenergysystem.com/?page_id=442">Home Additions</a></div>
        </li>                   </ul>
                </div><!-- #third .widget-area -->

                <div id="fourth" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-23">           <div class="textwidget">
<a id="footer-text" href="http://americandreamenergysystem.com/?page_id=50">Contact Us</a><br/>
</div>
        </li>                   </ul>
                </div><!-- #fourth .widget-area -->

            </div><!-- #footer-widget-area -->

            <div id="site-info">
                <a href="http://localhost:8888/" title="" rel="home">
                                    </a>
            </div><!-- #site-info -->

            <div id="site-generator">

            </div><!-- #site-generator -->

            </div><!-- #colophon -->

         <!-- #copyright -->


    </div><!-- #footer -->

</div><!-- #wrapper -->


<div id="foot-note">

</div>

<script type="text/javascript">
if (typeof jQuery != 'undefined') {  
    // jQuery is loaded => print the version
    alert(jQuery.fn.jquery);
}
</script>



<script>

jQuery(".scrollable").scrollable();

jQuery(".items img").click(function() {

    // see if same thumb is being clicked
    if (jQuery(this).hasClass("active")) { return; }

    // in the above example replace the url assignment with this line
    var url = jQuery(this).attr("alt");

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = jQuery("#image_wrap").fadeTo("medium", 1);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    jQuery(".items img").removeClass("active");
    jQuery(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();

</script>



<script type="text/javascript">

    jQuery(document).ready(
        function()
        {
            jQuery('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>

<script type="text/javascript">

     var $jq = jQuery.noConflict();  
    $jq(document).ready(
        function()
        {
            $jq('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 55,
                    proximity: 60,
                    halign : 'center'
                }
            )

            $jq('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 55,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )   
        }
    );

</script>

<script type="text/avascript">

var $jq = jQuery.noConflict();  

</script>

<script type="text/javascript">

$jq(document).ready(function($jq) {
    var scrollTo = function(yoza) {
        $jq('html, body').animate({
            scrollTop: $jq(yoza).offset().top
       }, 300);
    };

    $jq('#next').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if ($jqcurrent.index() != $jq('#home-block > div').length - 1) {
            $jqcurrent.removeClass('current').next().addClass('current');
            scrollTo($jqcurrent.next());
        }
    });
    $jq('#prev').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if (!$jqcurrent.index() == 0) {
           $jqcurrent.removeClass('current').prev().addClass('current');
            scrollTo($jqcurrent.prev());
        }
    });
});

</script>    


</body>
</html>

此时，我不知道还有什么可以尝试。显然有些东西不合适，但对我来说并不明显。我想这是一件简单的事情，而且这种方式的复杂程度超出了它的需要。我真的可以用一些帮助包围我的想法。

因此，如果有人注意到我做错了什么，请指出我思考过程中的错误，因为我不知道这场冲突的来源。

谢谢，尼克

更新

从函数文件中删除jQuery工具和1.7.1仍然无法解决问题。

我继续上传网站，以简化此过程。

Here

截至目前，我的函数文件中有一个脚本，我正在尝试使用wordpress附带的1.7.1库来避免库冲突。

所以也许现在可以看到我正在处理的页面，这将更容易缩小范围。

谢谢，尼克

Answer 1

我认为你的平滑滚动脚本是在你的jquery脚本之前加载的。要确保首先将jQuery排入队列，请将“jquery”句柄添加为平滑滚动排队脚本函数的依赖项。您已经使用了其他一些脚本，只需将其添加到平滑滚动行中即可。

wp_register_script('smooth-scroll', get_bloginfo('stylesheet_directory').'/js/jquery.scrollTo-1.4.2-min.js', array('jquery');

希望有所帮助。

jQuery Next / Prev Smooth Scrolling和Wordpress？

1 个答案: