How to stop scroll top on clicking next or prev btn of Carousel?
<p>Following is the simple carousel in use, even it looks fine here in coding, however on browser whenever tried to click <code>next</code> or <code>prev</code> button, page is  <code>scrolled</code> to top of HTML.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;Bootstrap Example&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .carousel-inner &gt; .item &gt; img,
  .carousel-inner &gt; .item &gt; a &gt; img {
      width: 70%;
      margin: auto;
  }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;SAMPLE CONTENT HERE&lt;/h1&gt;
    &lt;h1&gt;SAMPLE CONTENT HERE&lt;/h1&gt;
    &lt;h1&gt;SAMPLE CONTENT HERE&lt;/h1&gt;
    &lt;h1&gt;SAMPLE CONTENT HERE&lt;/h1&gt;
&lt;div class="container"&gt;
  &lt;br&gt;
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="img_chania.jpg" alt="Chania" width="460" height="345"&gt;
      &lt;/div&gt;

      &lt;div class="item"&gt;
        &lt;img src="img_chania2.jpg" alt="Chania" width="460" height="345"&gt;
      &lt;/div&gt;
    
      &lt;div class="item"&gt;
        &lt;img src="img_flower.jpg" alt="Flower" width="460" height="345"&gt;
      &lt;/div&gt;

      &lt;div class="item"&gt;
        &lt;img src="img_flower2.jpg" alt="Flower" width="460" height="345"&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Left and right controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Found the reason somewhere with <code>data-target</code>, however, unable to figure it out, and how to stop scrolling top... </p>

<p>Looking for simplest solution to understand, as new to HTML..</p>

<p>Thanks in advance</p>

<p>Cheers..</p>