Question

超级新问题，但我的布莱恩今晚不工作。我在wordpress网站上使用提供的JS脚本，使单页网站菜单滚动到相关部分。

我有一个包含选项的菜单＆＃39; Home＆＃39; ＆＃39;人＆＃39; ＆＃39;信息＆＃39; ＆＃39;联系＆＃39;

这些链接的结构如下：＆＃34; http://sample.com/#home＆＃34;

<!-- Navigation Menu -->
<div class="collapse navbar-collapse" id="navigation">
  <ul id="menu-menu-1" class="nav navbar-nav navbar-right"><li id="menu-item-15"   class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15">
<a href="http://sample.com/#home">Home</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-        item-51">
<a href="http://sample.com/#people">People</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">
 <a href="http://sample.com/#info">Info</a></li>
 <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom  menu-item-54">
 <a href="http://sample.com/#contact">Contact</a></li>
 </ul>    
   </div>
<!-- End Navigation Menu -->

JS如下所示。

 //Navigation Scrolling
 $('#navigation a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top
    }, 1000);
    return false;
  }
}
});

问题：当点击菜单链接时，页面会重新加载并显示相关部分。

我希望菜单项能够滚动到相关部分。

感谢。

TL; DR菜单项重新加载页面而不是滚动到相关部分。 JS上面。

Answer 1

使用event.preventDefault()，

来阻止锚标记的默认功能

 $('#navigation a[href*=#]').click(function(e) {
   e.preventDefault();
   //Rest of your code

WP菜单未按预期工作

1 个答案: