jQuery Next/Prev平滑滚动和Wordpress？
jQuery Next/Prev平滑滚动和Wordpress？
提问于 2012-03-20 00:52:34
jsFiddle中的示例如我在http://jsfiddle.net/HRewD/17/中所希望的那样工作
BUT..When我尝试在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.
只有在单击next或or之后，我才会得到此错误，该错误的左边是一个数字，每次单击后，该数字以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>My 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;
}My 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>在 (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');下面是我前面提供的JS Fiddle中的一个工作示例
我在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，加载两者，没有加载，并且希望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=" » Feed" href="http://localhost:8888/feed/" />
<link rel="alternate" type="application/rss+xml" title=" » 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&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 © 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仍然不能解决这个问题。
为了让这个过程更简单，我继续上传了这个网站。
这里
到目前为止，我的函数文件中只有一个脚本，我试图使用wordpress附带的1.7.1库来避免库冲突。
因此，也许现在我正在处理的页面是可见的，这将更容易缩小范围。
谢谢，尼克
回答 1
Stack Overflow用户
发布于 2012-05-19 16:05:16
我认为您的平滑滚动脚本在jquery脚本之前加载。为了确保jQuery首先排队，将'jquery‘句柄作为依赖项添加到平滑滚动登记队列脚本函数中。您已经使用了一些其他脚本，只需将其添加到光滑的滚动线即可。
wp_register_script('smooth-scroll', get_bloginfo('stylesheet_directory').'/js/jquery.scrollTo-1.4.2-min.js', array('jquery');希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9780047
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号