WordPress：单页滚动JQuery脚本无法正常工作？
试图创建一个简单的单页滚动。
在WordPress中，我有导航这样的标签。
Contact About 两个链接的对应div是这个。
#content #content </div
这是问题（我认为）。 我的脚本没有选择锚链接ID。
的script.js
/* ONE PAGE NAVIGATION FUNCTION */ function setBindings() { jQuery('a[href^="#"]').click(function(e) { // prevent anchor tags for working (?) e.preventDefault(); var sectionID = e.currentTarget.id + "-View"; jQuery("html, body").animate({ scrollTop: jQuery("#" + sectionID).offset().top }, 1000) }) }
任何想法，我在这里做错了什么？ 这是网站
更新 **以下是我在查看答案后所做的修改。 脚本仍然不起作用？！
jQuery(document).ready(function() { // add a click listener to each tags setBindings(); // burger nav jQuery(".burger-nav").on("click", function() { jQuery(".header-nav").toggleClass("open"); }); }); /* ONE PAGE NAVIGATION FUNCTION */ function setBindings() { jQuery('a[href^="#"]').on('click', function(e) { e.preventDefault(); // Get the href attribute, which includes '#' already var sectionID = $(this).attr('href') + "-View"; jQuery("html, body").animate({ // Find target element scrollTop: jQuery(sectionID).offset().top }, 1000) }); }
使用正确的ID，如：
Contact for #content About #content
jQuery(document).ready(function(){ jQuery("a").on('click', function(event) { if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area jQuery('html, body').animate({ scrollTop: jQuery(hash).offset().top }, 1500, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } }); });
Contact About About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl est, malesuada nec dolor vel, bibendum congue nunc. Aliquam efficitur nulla ac tortor pharetra, id posuere sapien blandit. Fusce ultrices hendrerit diam. Ut quis mi in sapien elementum egestas vitae in purus. Donec nec ex a justo laoreet placerat eu ut lectus. Quisque placerat turpis tincidunt odio blandit, sed posuere ipsum imperdiet. Vestibulum porttitor et sapien vitae pretium. .
Sed scelerisque vulputate ligula, eu blandit enim congue vel. Quisque risus sapien, pellentesque nec est vitae, elementum interdum metus. Fusce sagittis turpis nec tortor lacinia rutrum. Ut sodales blandit tellus a auctor. Vestibulum ante ipsum
Contact
Proin posuere porta magna efficitur tincidunt. Duis tincidunt nulla vel elit sagittis, eu ornare quam vehicula. Sed ut urna a purus imperdiet ultrices. Sed non ipsum vitae nisl dapibus volutpat. In sed interdum mauris. Curabitur ipsum sapien, dapibus at purus ut, elementum tempus urna. Nullam dignissim volutpat velit. Duis mi est, eleifend sed ante dolor.
ondimentum et purus. Nunc convallis elit purus, ut tempus ipsum sodales et. Sed vulputate nec massa non viverra. Mauris tempus efficitur efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nulla lectus, dictum non sollicitudin ac, tincidunt nec eros. Quisque posuere tellus in lacinia pharetra. Aliquam pellentesque, lacus quis finibus finibus, ipsum ante aliquet felis, a euismod diam urna nec tortor. Integer vitae tempor nunc, quis auctor mauris.
根据我的评论，您的代码中存在多个语法错误，其中函数调用未正确关闭：
-
function(e)有一个额外的尾随)
- 您没有正确关闭jQuery
.on()方法。 你用}而不是}) 。
当您检查浏览器控制台时，这些错误应该非常明显 – 这就是为什么在您的问题中创建一个最小，具体和可validation的示例非常必要的原因，因为您已经通过修复代码中的语法错误来解决一半问题。
除此之外， e.currentTarget.id不引用目标元素的ID。 e.currentTarget只是引用“事件冒泡阶段中的当前DOM元素” ，它仍然是-View …而jQuery('-view')与页面上的任何内容都不匹配，因此不会发生滚动。
你可以做的只是简单地读取锚元素的href属性，将-View附加到它并简单地将它传递给jQuery选择器，即：
var sectionID = $(this).attr('href') + "-View";
请参阅下面的概念validation示例：
jQuery(function() { function setBindings() { jQuery('a[href^="#"]').on('click', function(e) { e.preventDefault(); // Get the href attribute, which includes '#' already var sectionID = $(this).attr('href') + "-View"; jQuery("html, body").animate({ // Find target element scrollTop: jQuery(sectionID).offset().top }, 1000) }); } setBindings(); });
Contact About About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl est, malesuada nec dolor vel, bibendum congue nunc. Aliquam efficitur nulla ac tortor pharetra, id posuere sapien blandit. Fusce ultrices hendrerit diam. Ut quis mi in sapien elementum egestas vitae in purus. Donec nec ex a justo laoreet placerat eu ut lectus. Quisque placerat turpis tincidunt odio blandit, sed posuere ipsum imperdiet. Vestibulum porttitor et sapien vitae pretium. Cras id nisl enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean in nulla porttitor, tincidunt nulla id, vestibulum enim. Etiam ante justo, congue eu diam consequat, fringilla tempus orci.
Duis magna ipsum, venenatis et massa eget, dignissim imperdiet felis. Quisque vel ultrices purus. Cras ante nulla, auctor quis purus et, finibus congue massa. Fusce eleifend tristique ipsum non tempor. Vivamus eget leo dignissim, efficitur urna a, dignissim metus. Sed scelerisque vulputate ligula, eu blandit enim congue vel. Quisque risus sapien, pellentesque nec est vitae, elementum interdum metus. Fusce sagittis turpis nec tortor lacinia rutrum. Ut sodales blandit tellus a auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean placerat massa nisl, semper varius neque vehicula a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Contact
Proin posuere porta magna efficitur tincidunt. Duis tincidunt nulla vel elit sagittis, eu ornare quam vehicula. Sed ut urna a purus imperdiet ultrices. Sed non ipsum vitae nisl dapibus volutpat. In sed interdum mauris. Curabitur ipsum sapien, dapibus at purus ut, elementum tempus urna. Nullam dignissim volutpat velit. Duis mi est, eleifend sed ante ac, malesuada lacinia sem. Quisque facilisis elit ultricies, scelerisque orci in, tempor purus. Nam dapibus eros at risus tincidunt laoreet. Donec facilisis sed erat interdum aliquet. Integer feugiat lorem id odio eleifend, eget eleifend sapien dapibus. Sed posuere mi vitae metus malesuada mollis. Mauris ac felis fringilla, euismod tellus sed, dictum nunc. In vel gravida dolor.
Curabitur laoreet facilisis massa ac tristique. Suspendisse tortor nisl, faucibus non nunc eu, feugiat dictum ligula. Donec ipsum ipsum, volutpat a maximus nec, sagittis quis ipsum. Praesent arcu lectus, rhoncus quis lacinia a, condimentum et purus. Nunc convallis elit purus, ut tempus ipsum sodales et. Sed vulputate nec massa non viverra. Mauris tempus efficitur efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nulla lectus, dictum non sollicitudin ac, tincidunt nec eros. Quisque posuere tellus in lacinia pharetra. Aliquam pellentesque, lacus quis finibus finibus, ipsum ante aliquet felis, a euismod diam urna nec tortor. Integer vitae tempor nunc, quis auctor mauris.
您可以使用下面的页面滚动
$(document).ready(function() { jQuery('a[href^="#"]').on('click', function(e) { e.preventDefault(); var sectionID = $(this).attr('href') + "-View"; jQuery("html, body").animate({ scrollTop: jQuery(sectionID).offset().top }, 1000) }); });