jQuery Next/Prev平滑滚动和Wordpress? [英] jQuery Next/Prev Smooth Scrolling and Wordpress?
问题描述
我希望在 http://jsfiddle.net/HRewD/17/
但是..当我尝试在wordpress中实现时，没有平滑的滚动链接:(
BUT..When I try to implement in wordpress, no smooth scrolling links :(
我认为可能与$有关，因此我将它们全部从$更改为通常可以使用的jQuery，但这次不起作用.
I feel it may have to do with the $'s, so I changed them all from $ to jQuery which normally works but not this time.
我也尝试按照建议使用jQuery.noConflict()，但是没有运气.
I also tried using jQuery.noConflict() as suggested but with no luck.
我目前正在本地上使用此网站，因此目前无法在线链接到该网站.
I am currently working on this site locally, so I am unable to link to it online at the moment.
我还有其他一些可以在jQuery上正常运行的插件，因此jQuery 1.6.4肯定正在加载.
I have a few other plugins working perfectly which call on jQuery, so jQuery 1.6.4 is definitely loading.
我意识到我并没有付出太多的努力，但是我非常感谢任何可以帮助我弄清楚这个问题的线索.因为在这一点上我很沮丧.
I realize I haven't given a lot to work with, but I would really appreciate any sort of lead to help me get this figured out. Because at this point I am stumped.
因此，如果有人可以伸出援手，我将不胜感激.
So if anyone could lend a hand, I would be grateful.
更新:
我一直在研究和解决这个问题，并进一步缩小了范围，但我仍在努力将所有问题包裹住.我在控制台中收到一个错误，这是由于字符不可见(我猜是由JSFiddle创建的?！).我在代码中的各个位置运行了一个简单的警报功能，它显示得很好.
I have been working on this problem on and off and have narrowed it further but I am still struggling to wrap my head around all of it. I received one error in the console and it was because of an invisible character (I guess created by JSFiddle?!). I ran a simple alert function at various places in the code and it displayed fine.
到目前为止，我还没有注意到野生动物园，FF和Opera开发人员工具的控制台或资源"部分中的任何错误，但仅在chrome中，我得到了错误
As of now, I am not noticing any errors in the console or 'resources'section of the developer tools for safari, FF and Opera, but only in chrome I am getting the error
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
只有在单击下一个或上一个错误错误左侧的数字后，才会出现此错误，每次单击后递增2.
I get this error ONLY after clicking next or previous with a number to the left of the error that increases in increments of 2 after each click.
我的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');
我也可以在JS Bin和静态html页面中使用此功能，但不能在wordpress中使用
I also have this working in JS Bin as well as a static html page, but NOT in wordpress.
我尝试过的事情:
我已经确保Jquery库实际上是通过以下功能加载的:
I have ensured that Jquery library is in fact loading with with this function:
<script type="text/javascript">
if (typeof jQuery != 'undefined') {
// jQuery is loaded => print the version
alert(jQuery.fn.jquery);
}
</script>
返回1.6.4.我发现此版本似乎来自jquery工具脚本.
Which returns with 1.6.4. I have found this version seems to be coming from the jquery tools script.
我已经停用了所有其他插件，以防某些插件可能正在加载自己的jQuery库. 我在我的functions.php文件中隔离了要加载的脚本:我试图取消注册wordpress'包含的JQ，并且仅加载1.6.4，仅加载1.7.1，同时加载，不加载并且希望wordpress'包含的JQ库将注册不仅可以解决问题，还可以重新安排它们的加载顺序，但是这些都没有让我对这个问题有任何了解.
I have de-activated all other plug ins in case some may be loading their own jQuery library. I have isolated the scripts I am loading in my functions.php file: I tried to de register wordpress' included JQ and only loading 1.6.4, only loading 1.7.1, loading both, loading none and hoping wordpress' included JQ library would do the trick as well as re arranging the order they load but none of these gave me any insight into this problem.
我已经测试了变量是否存在，并且可以从前面提到的JS脚本中获取这些变量，并且该脚本返回了变量，以确认变量的存在.
I have tested if variables exist and are available from my JS script mentioned earlier and the script returned acknowledging the variables' presence.
我尝试使用$符号玩游戏:
I have tried playing with the $ symbol using:
var $jq = jQuery.noConflict();
并将所有实例更改为$ jq以及jQuery，但均不执行任何操作.
and changing all instances to $jq as well as jQuery but neither do anything.
我还尝试过更改#next，#prev和.post变量的名称，以为它们可能与具有相同名称但没有其他名称的其他变量发生冲突.
I have also tried changing the names of the #next, #prev, .post variables thinking that maybe they are conflicting with others with the identical name, but nothing.
我已经检查了文件路径，阅读了许多论坛主题
I have checked the file paths, read numerous forum threads
其他值得一提的地方:
我还有其他来自这些相同库的jQuery模块吗?? 没有控制台错误? 这可能没有用，但我注意到的一件事是，单击上一个或下一个之后，我的屏幕将伸展，以使页面右侧的滚动条现在被隐藏，但立即重新出现.
I have other jQuery modules working from these same libraries?? No console errors?? This may not be of use, but one thing I notice is that after clicking either previous or next, my screen will stretch so that the scroll bar on the right of the page is now hidden, but immediately reappears.
这可能已被杀死，但我认为提供源可能是个好主意(仍在本地运行并且无法链接到该站点):
And this might be over kill but I feel providing the source might be a good idea (still working locally and unable to link to the site) :
<!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>
在这一点上，我不知道还要尝试什么.显然，有些事情是不整齐的，但对我而言，这不是显而易见的.我认为这很简单，而且使这种方式变得比所需的复杂得多.我真的可以使用一些帮助解决这个问题.
At this point, I don't know what else to try. Obviously something is not in order, but it's not apparent to me. I imagine it's something simple and that I am complicating this way more than it needs to be. I could really use some help wrapping my mind around this.
因此，如果有人注意到我在做什么错，请指出我在思考过程中的错误，因为我不知道这种冲突的根源.
So if anyone notices what I am doing wrong, please point out the mistakes in my thought process because I have no idea where this conflict is coming from.
谢谢， 尼克
更新:
同时从功能文件中删除jQuery工具和1.7.1仍不能解决问题.
Removing both jQuery tools and 1.7.1 from the functions file still doesn't solve the issue.
我继续上传了该网站，以简化此过程.
I went ahead and uploaded the site to make this process simpler.
到目前为止，我的函数文件中有一个脚本，并且我试图利用wordpress附带的1.7.1库来避免库冲突.
As of now, I have one script in my functions file and I am trying to make use of the 1.7.1 library included with wordpress to avoid library conflicts.
所以也许现在我正在处理的页面可见，这将使缩小范围变得容易.
So maybe now that the page I am working on is visible this will be easier to narrow down.
谢谢， 尼克
推荐答案
我认为您的平滑滚动脚本要比jquery脚本先加载.为确保先将jQuery入队，请将"jquery"句柄作为依赖项添加到平滑滚动入队脚本功能.您已经将其与其他一些脚本一起使用了，只需将其也添加到平滑滚动行中即可.
I think your smooth scrolling script is loading before your jquery script. To ensure that jQuery is enqueued first, add the 'jquery' handle as a dependency to the smooth scrolling enqueue script function. You already have this with some of your other scripts, just add it to the smooth scrolling line as well.
wp_register_script('smooth-scroll', get_bloginfo('stylesheet_directory').'/js/jquery.scrollTo-1.4.2-min.js', array('jquery');
希望有帮助.
这篇关于jQuery Next/Prev平滑滚动和Wordpress?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
