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

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

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

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?