Strona przewija się do góry przy wykonaniu funkcji w JavaScript

Question

Witam, mam problem. Tworzę swoje portfolio i stworzyłem funkcje, które podmieniają zawartość diva. Wszystko fajnie działa, tyle, że strona przy wykonaniu każdej funkcji przewija się na sama górę. Da się temu jakoś zapobiec? Uprzedzam, że w temacie JavaScript jestem dość nowy, ale potrzebuje pomocy teraz, bo na jutro muszę mieć gotową stronę. Z góry dziękuję za pomoc!

<script>
          function fn1()
          {
               document.getElementById('content').innerHTML = "pierwsza zawartość"
          }
          function fn2()
          {
               document.getElementById('content').innerHTML = "druga zawartość"
          }
          function fn3()
          {
               document.getElementById('content').innerHTML = "3 zawartość"
          }
          function fn4()
          {
               document.getElementById('content').innerHTML = "4 zawartość"
          }
          function fn5()
          {
               document.getElementById('content').innerHTML = "piąta zawartość"
          }
     </script>

<h1>Krótko o mnie</h1>
                                   <a href="#">
                                        <div id="tile1" onclick="fn1()">
                                             <p>Historia<br /><i class="icon-street-view"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile2" onclick="fn2()">
                                             <p>Wrażliwość<br /><i class="icon-note"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile3" onclick="fn3()">
                                             <p>Psychologia<br /><i class="icon-users"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile4" onclick="fn4()">
                                             <p>Rozwój osobisty<br /><i class="icon-user"></i></p>
                                        </div>
                                   </a>
                                   <a href="#">
                                        <div id="tile5" onclick="fn5()">
                                             <p>Programowanie<br /><i class="icon-code"></i></p>
                                        </div>
                                   </a>

 

Answer 1

Zdarzenie jest przechwytywane przez anchor i uruchamia się href="#". Użyj stopPropagation()

Comments

Skorzystałem z przewijania tekstu, ale dzieki za odpowiedź. Zastosuję w innych projektach ;)