jsFiddle中的示例我想在https://jsfiddle.net/HRewD/17/中工作
但是..当我尝试在wordpress中实现时,没有平滑的滚动链接:(
我觉得它可能与$’s有关,所以我将它们全部从$改为jQuery,这通常有效,但不是这次。
我也尝试使用jQuery.noConflict(),但没有运气。
我目前正在本地工作,所以我目前无法在线链接。
我有一些其他插件可以正常工作,调用jQuery,所以jQuery 1.6.4肯定是在加载。
我意识到我没有给予很多工作,但我真的很感激能帮助我解决这个问题。 因为在这一点上我很难过。
所以,如果有人伸出援手,我将不胜感激。
更新:
我一直在研究和解决这个问题,并进一步缩小了它,但我仍然在努力绕过所有这一切。 我在控制台中收到一个错误,这是因为一个看不见的字符(我猜是由JSFiddle创建的?!)。 我在代码中的不同位置运行了一个简单的警报function,它显示正常。
截至目前,我没有注意到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:
Content Goes here A box of content Content More content...
我的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:
$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()); } }); });
我的脚本在functions.php(wordpress)中调用:
function my_scripts_method() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'https://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', ("https://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 Bin和静态html页面工作,但不是在wordpress。
我尝试过的事情:
我确保Jquery库实际上正在使用此函数加载:
if (typeof jQuery != 'undefined') { // jQuery is loaded => print the version alert(jQuery.fn.jquery); }
以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变量的名称,认为它们可能与具有相同名称的其他变量冲突,但没有。
我检查了文件路径,阅读了很多论坛post
其他值得一提的事情:
我有其他jQuery模块在这些相同的库中工作? 没有控制台错误? 这可能没有用,但我注意到的一点是,在点击上一个或下一个之后,我的屏幕将会拉伸,以便页面右侧的滚动条现在被隐藏,但会立即重新出现。
这可能是过度杀戮但我觉得提供源可能是一个好主意(仍在本地工作,无法链接到该网站):
scroll 2 | body.custom-background { background-color: #fff; } 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; } spacer Content Goes here A box of content Content More content... scroll 2
a great sailor was not made by smooth waters..
Edit