jQuery accordion menu: scroll to active menu item

jQuery accordion menu: scroll to active menu item

I have made an accordion menu intended to serve as an efficient mobile phone menu. I have used the jQuery 2.1.1 library for this purpose. The part that does not work as I want it to is that concerning the body tag animation. I want the document to scroll to the active menu item. 

This is what I came up with:

The HTML:
  1. <nav id="menu">
  2.       <ul>
  3.         <li><a href="#" class="menu-item">Software</a>
  4.           <ul class="sub-menu">
  5.             <li><a href="#">Operating systems</a></li>
  6.             <li><a href="#">MS Office</a></li>
  7.             <li><a href="#">Web development tools</a></li>
  8.           </ul>
  9.         </li>
  10.         <li><a href="#" class="menu-item">Monitors &amp; screens</a>
  11.           <ul class="sub-menu">
  12.             <li><a href="#">Monitors</a></li>
  13.             <li><a href="#">LCD</a></li>
  14.             <li><a href="#">TV</a></li>
  15.             <li><a href="#">DVD players</a></li>
  16.           </ul>
  17.         </li>
  18.         <li><a href="#" class="menu-item">Networking</a>
  19.           <ul class="sub-menu">
  20.             <li><a href="#">Routers</a></li>
  21.             <li><a href="#">Network Adapters</a></li>
  22.             <li><a href="#">Modems</a></li>
  23.             <li><a href="#">Cables</a></li>
  24.           </ul>
  25.         </li>
  26.         <li><a href="#" class="menu-item">Print &amp; scan</a>
  27.           <ul class="sub-menu">
  28.             <li><a href="#">Printers</a></li>
  29.             <li><a href="#">3D printers</a></li>
  30.             <li><a href="#">Scanners</a></li>
  31.           </ul>
  32.         </li>
  33.       </ul>
  34.     </nav>

The jQuery:
  1. $('#menu').children('ul').on('click', '.menu-item', function(e) {
  2.       if ($(window).width() < 640) {
  3.         e.preventDefault();
  4.         var $menu_item = $(this).closest('li');
  5.         var $sub_menu = $menu_item.find('.sub-menu');
  6.         var $other_sub_menus = $menu_item.siblings().find('.sub-menu');
  7.         if ($sub_menu.is(':visible')) {
  8.           $sub_menu.slideUp(200);
  9.           $menu_item.removeClass('selected');
  10.         } else {
  11.           $other_sub_menus.slideUp(200);
  12.           $sub_menu.slideDown(200);
  13.           $menu_item.siblings().removeClass('selected');
  14.           $menu_item.addClass('selected');
  15.         }
  16.       }
  17.        $('html,body').animate({
  18.           scrollTop: $(this).offset().top
  19.         }, 500);
  20.         console.log($(this).offset().top);
  21.     });

The CSS:
  1.  nav ul {
  2.       list-style-type: none;
  3.       margin: 0;
  4.       padding: 0;
  5.     }
  6.     #menu {
  7.       max-width: 640px;
  8.     }
  9.     #menu ul {
  10.       background: #069;
  11.     }
  12.     #menu ul.sub-menu {
  13.       display: none;
  14.       background: #fefefe;
  15.     }
  16.     #menu ul li a {
  17.       text-decoration: none;
  18.       display: block;
  19.       font-size: 13px;
  20.       color: #fff;
  21.       padding: 0 10px;
  22.       height: 32px;
  23.       line-height: 30px;
  24.       position: relative;
  25.       border-top: 1px solid rgba(0, 0, 0, 0.1);
  26.       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  27.     }
  28.     #menu ul.sub-menu li a {
  29.       padding-left: 25px;
  30.       color: #555;
  31.     }
  32.     #menu > ul > li > a:after {
  33.       display: inline-block;
  34.       vertical-align: middle;
  35.       content: "\2304";
  36.       position: absolute;
  37.       right: 0;
  38.       font-size: 20px;
  39.       line-height: 20px;
  40.       padding-bottom: 10px;
  41.       width: 30px;
  42.       text-align: center;
  43.       top: 0;
  44.       color: #fff;
  45.     }
  46.     #menu li.selected a:after {
  47.       -webkit-transform: rotate(180deg);
  48.       -moz-transform: rotate(180deg);
  49.       -ms-transform: rotate(180deg);
  50.       -o-transform: rotate(180deg);
  51.     }

Here is a JsFiddle.

Console logging the top offset gives an aberrant value if you click multiple menu items successively. As a consequence, the page does not scroll to the begginning of the active item. What ce I do?