title: How to prevent Leaflet from scrolling the page when clicking the zoom buttons?
body: <p>I have a leaflet map on an HTML page. When the page is scrolled so that any part of the map is outside of the viewport and I click the zoom buttons, the map jumps so that it's completely visible in the viewport. If the whole map doesn't fit, then the top of the map becomes aligned with the top of the viewport and the bottom just hangs off the end.</p>
  
  <p>This is annoying, because then the zoom button which the user just pressed is no longer under the cursor and they have to go find it again.</p>
  
  <p>I have tried both the built-in zoom bar and a custom one where I use <code>map.setZoom()</code> and the behaviour is consistent. However, the sample maps on <a href="https://leafletjs.com" rel="noreferrer">https://leafletjs.com</a> don't do this, so I'm at a loss.</p>
  
  <p>My map is quite simple:</p>
  
  <pre><code>var home = {center: L.LatLng(51.499725, -0.124695), zoom: 11};
  var mymap = L.map('map').setView(home.center, home.zoom);
  </code></pre>
  
  <p><a href="https://stackoverflow.com/q/48406645/1749551">This question</a> sounds similar to what I'm seeing, but is more complex than my situation. And anyway, there's no solution.</p>
  
  <p><strong>Edit:</strong> Here is the html and CSS, but it couldn't be more basic.</p>
  
  <p><em>map.html</em></p>
  
  <pre><code>    &lt;div class="container mx-sm-3"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  &lt;div id="map"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><em>map.css</em></p>
  
  <pre><code>#map {
      height: 570px;
      width: 700px;
  }
  </code></pre>