How to avoid scrolling?

Question

I have some very long text. I would like to make a few words clickable to add some comments.

To do this I use a small window that appears and disappears with a click. I don't understand why, when I click to open this window, the page scrolls. I don't know how to avoid it. Do you have any idea how it can be avoided?

$(document).ready(function() {
  var arrayText = [
    [1, " text 1 text 1"],
    [2, " text 2 text 2"]
  ];

  $(".note").click(function() {
    var title = $(this).attr("title");
    var idx = (title - 1);
    $("#nWin").show();
    $("#nWin").html(arrayText[idx][1]);
  });

  $("#nWin").click(function() {
    $(this).hide();
  });

});

body {
  background: #333;
}

#corpus {
  margin-left: 80px;
  width: 250px;
  background: #111;
  color: #ffd;
  border: 2px solid white;
  padding: 12px;
  font-size: 130%;
}

#nWin {
  position: fixed;
  top: 200px;
  left: 180px;
  width: 100px;
  height: 30px;
  background: lightgreen;
  display: none;
  z-index: 999;
}

a {
  color: #ff4d4d;
  text-decoration: none;
}

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div id="corpus">
  <p>1...top</p>
  <p>2....</p>
  <p>3....</p>
  <p>4....</p>
  <p>5....</p>
  <p>6....</p>
  <p>7....</p>
  <p>8....</p>
  <p>9....</p>
  <p>10....</p>
  <p>1....</p>
  <p>2....</p>
  <p>3....</p>
  <p>4....</p>
  <p>5....</p>
  <a href="#" class="note" title="1">click me</a>
  <p>6...</p>
  <p>7....</p>
  <p>8....</p>
  <p>9....</p>
  <p>20....</p>
  <a href="#" class="note" title="2">click me</a>
  <p>1....</p>
  <p>2....</p>
  <p>3....</p>
  <p>4....</p>
  <p>5....</p>
</div>

<div id="nWin"></div>