javascript - jQuery Accordion 菜单 : scroll to active menu item

Question

我制作了一个 Accordion 菜单，旨在作为高效的手机菜单。为此，我使用了 jQuery 2.1.1 库。

没有按照我想要的方式工作的部分是关于主体标签动画的部分。

我希望文档滚动到事件菜单项，而不是像现在那样滚动到nav标记。

这是我想到的:

$('#menu').children('ul').on('click', '.menu-item', function(e) {
  if ($(window).width() < 640) {
    e.preventDefault();
    var $menu_item = $(this).closest('li');
    var $sub_menu = $menu_item.find('.sub-menu');
    var $other_sub_menus = $menu_item.siblings().find('.sub-menu');
    if ($sub_menu.is(':visible')) {
      $sub_menu.slideUp(200);
      $menu_item.removeClass('selected');
    } else {
      $other_sub_menus.slideUp(200);
      $sub_menu.slideDown(200);
      $menu_item.siblings().removeClass('selected');
      $menu_item.addClass('selected');
    }
  }
   $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 500);
    console.log($(this).offset().top);
});

body {
  font-family: Arial, sans-serif;
}
p {
  font-size: 14px;
  line-height: 1.6;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menu {
  max-width: 640px;
}
#menu ul {
  background: #069;
}
#menu ul.sub-menu {
  display: none;
  background: #fefefe;
}
#menu ul li a {
  text-decoration: none;
  display: block;
  font-size: 13px;
  color: #fff;
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#menu ul.sub-menu li a {
  padding-left: 25px;
  color: #555;
}
#menu > ul > li > a:after {
  display: inline-block;
  vertical-align: middle;
  content: "\2304";
  position: absolute;
  right: 0;
  font-size: 20px;
  line-height: 20px;
  padding-bottom: 10px;
  width: 30px;
  text-align: center;
  top: 0;
  color: #fff;
}
#menu li.selected a:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Page title</h1>

<nav id="menu">
  <ul>
    <li><a href="#" class="menu-item">Software</a>
      <ul class="sub-menu">
        <li><a href="#">Operating systems</a></li>
        <li><a href="#">MS Office</a></li>
        <li><a href="#">Web development tools</a></li>
      </ul>
    </li>
    <li><a href="#" class="menu-item">Monitors &amp; screens</a>
      <ul class="sub-menu">
        <li><a href="#">Monitors</a></li>
        <li><a href="#">LCD</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">DVD players</a></li>
      </ul>
    </li>
    <li><a href="#" class="menu-item">Networking</a>
      <ul class="sub-menu">
        <li><a href="#">Routers</a></li>
        <li><a href="#">Network Adapters</a></li>
        <li><a href="#">Modems</a></li>
        <li><a href="#">Cables</a></li>
      </ul>
    </li>
    <li><a href="#" class="menu-item">Print &amp; scan</a>
      <ul class="sub-menu">
        <li><a href="#">Printers</a></li>
        <li><a href="#">3D printers</a></li>
        <li><a href="#">Scanners</a></li>
      </ul>
    </li>
  </ul>
</nav>


<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo.</p>

更新: 按照 Kano 的建议，我将 scrollTop: $('#menu').offset().top 替换为 scrollTop: $(this).offset().top 。

效果更好，但还不够好。如果您连续单击多个菜单项，控制台记录顶部偏移量会给出异常值。

谢谢!

Answer 1

只需在 jQuery 代码片段中更改此部分即可:

$('body').animate({
  scrollTop: $("#menu").offset().top
}, 300);

对此:

$('body').animate({
  scrollTop: $(this).offset().top
}, 300);

这样，当您调用 animate() 进行滚动时，您将获取单击的菜单项的偏移量，而不是 #menu 选择器(它始终在您的情况下导致了 nav 元素)。