jQuery Next/Prev平滑滾動和Wordpress？

例中的jsfiddle工作，我想在http://jsfiddle.net/HRewD/17/jQuery Next/Prev平滑滾動和Wordpress？

BUT..When我嘗試在WordPress的落實，沒有平滑滾動鏈接:(

我覺得它可能與$的做，所以我改變了他們所有的$ jQuery的通常工作，但這次不會。

我也使用jQuery.noConflict（）的建議，但沒有運氣嘗試。

我目前的工作在這個網站在本地，所以我目前無法在線鏈接到它。

我有幾個其他的插件可以完美的在jQuery上調用，所以jQuery 1.6.4肯定會加載。

我意識到我沒有給與很多工作，但我會很感激任何形式的領導幫助我得到這個想法。因爲在這一點上我很難過。

所以如果任何人都可以伸出援助之手，我將不勝感激。

更新：

我一直在這個問題上下車，並進一步縮小了，但我仍然在努力環繞它的所有我的頭。我在控制檯收到一個錯誤，這是因爲一個不可見的字符（我猜是由JSFiddle創建的！）。我在代碼中的不同位置運行了一個簡單的警報函數，並且顯示正常。

截至目前，我沒有注意到任何錯誤控制檯或「的開發工具Safari瀏覽器，FF和Opera resources'section，但僅適用於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斌這方面的工作，以及一個靜態的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

截至目前，我在我的功能文件中的一個劇本，我想利用1.7.1庫包括與WordPress，以避免衝突庫。

因此，也許現在我正在處理的頁面可見，這將更容易縮小範圍。

感謝，尼克

來源

2012-03-20 Ncastro340

感謝您使用JSFiddle，即使您無法鏈接到您的實際網站。 +1。你有沒有檢查你的瀏覽器的錯誤控制檯，以及腳本實際上是否用'alert（）'在某處執行？ – Bojangles 2012-03-20 01:02:52

是在控制檯中，我得到了jQuery的未定義的，意外的令牌<和意外的令牌非法。我不確定這些都是特指這一個腳本，我不確定如何知道這些錯誤來自哪裏。我也沒想過看看我的代碼中是否有警報返回，所以我會給它一個鏡頭。忍受我，我仍然在學習JavaScript。很明顯，我還有一些障礙需要跳躍。 – Ncastro340 2012-03-20 01:47:29

根據我的經驗，jquery-tools與jquery-ui以及其他腳本命名空間相沖突，即使在使用唯一名稱時也經常包含在WordPress中，請嘗試刪除它並使用其他庫並查看。 – Wyck 2012-04-01 15:38:53

我覺得你的平滑滾動腳本的jQuery腳本之前加載。爲了確保jQuery先入隊，將jquery的句柄作爲依賴項添加到平滑滾動入隊腳本函數中。您已經擁有了其他一些腳本，只需將其添加到平滑滾動行即可。

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

希望有所幫助。

來源

2012-05-19 16:05:16 eddiemoya

jQuery Next/Prev平滑滾動和Wordpress？

回答

相關問題