title: CSS/Javascript Auto Scroll To Top
body: <p>I am currently working on a simple (or so I thought) slide-down menu for both the desktop and mobile versions of a website I am working on. I'm trying to do this in CSS only if possible. Currently the CSS I am using is as follows:</p>
  
  <pre><code>#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; }
  #menu:hover {max-height: 75%; overflow: auto}
  </code></pre>
  
  <p>The reason I have the 'overflow: auto' when on a smaller screen is due to the entire menu not showing when on a smaller screen - even when I have some elements not showing on mobile screens. </p>
  
  <p>The problem I'm running into is when it DOES overflow and the user scrolls through the menu, when they click/hover out of the menu it retracts like it should but it doesn't show the top of the menu anymore, it will show wherever they scrolled to. </p>
  
  <p>I'd like to find a way either via CSS or Javascript to automatically have that div scroll back to the top when the user clicks/hovers out of the menu so it will still show the menu icon + logo instead of random menu text.</p>
  
  <p>I love how it works but can't stand the scrolling issue on smaller screens. </p>