The page goes back to the top to each <a> element pressed, how to prevent?

Asked

Viewed 37 times

-2

I’m having trouble in a part of the code where every time I press any button, the page goes to the top.

I have only a few numbers, but in the future there will be several numbers (anchor elements) that I will select to submit a form. That’s why I populated the page with garbage written just to make body and make it easy to notice that it’s coming back to the top without need.

Code:

console.log('teste');

// var UIController = (function() {
//     return {
//       getinput: function() {
//         todosItens = document.querySelector('.btn_reservas').toggleAttribute;
//       }
//     };
  
//   })();
var controller = (function() {

  var ctrlAddItem = function(event) {
  console.log('It worked, pressed id  = ' + event.target.id);
  event.target.classList.toggle("active");
  }
  
  document.querySelectorAll(".btn_reservas").forEach(function () {
      this.addEventListener("click", ctrlAddItem);
    });
  
  document.addEventListener('keypress', function(event) {
      if (event.keyCode === 13 || event.which === 13) {
          ctrlAddItem();
      }
  });
  
  })();
.lista ul li {
  display: inline;
}

.lista ul li a {
  display: block;
  border: 2px solid #bfc0bf;
  border-radius: 50%;
  width: 100%;
  line-height: 40px;
  max-width: 75px;
  height: auto;
  font-weight: 700;
  text-decoration: none;
  display: inline;
  box-sizing: border-box;
  padding: 20px;
  font-family: sans-serif;
  font-size: 13px;
  color: #ffffff;
  background-color: rgb(85, 161, 108);
  border-color: #212529;
  margin-right: 50px;
}

.lista ul li a:hover {
  color: #212529;
  background-color: #ffffff;
  font: bolder;
  transition: all 600ms ease;
}

.lista ul li a.active {
  background-color: #f90;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-6">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600" rel="stylesheet" type="text/css">
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" href="styles/antigo.css"> 

    <title> Pagina de sorteio </title>
</head>
<body>

    <nav id="menu">
        <ul>
            <li>
                <a href="index.html">Inicio</a>
            </li>
            <li>
                <a href="sorteio.html">Sorteio</a>
            </li>
            <li>
                <a href="sobrenos.html">Sobre Nos</a>
            </li>
        </ul>
    </nav>

    <hr>
    <h1>VAMOS</h1>
    <hr>
    <h1>ABAIXAR</h1>
    <hr>
    <h1>ESSA PAGINA</h1>
    <hr>
    <hr>
    <h1>VAMOS</h1>
    <hr>
    <h1>ABAIXAR</h1>
    <hr>
    <h1>ESSA PAGINA</h1>
    <hr>
    <hr>
    <h1>VAMOS</h1>
    <hr>
    <h1>ABAIXAR</h1>
    <hr>
    <h1>ESSA PAGINA</h1>
    <hr>

    <div class="lista_sorteio">
    <h1>O GRANDE SORTEIo</h1>
    <hr>
    <div class="legenda">
        <ul>
            <li>
              <b class="disponivel">Disponiveis</b>  
            </li>
            <li>
                <b class="reservados">Reservados</b>
            </li>
            <li>
                <b class="pagos">Pagos</b>
            </li>
            <li>
                <b class ="enviar">Enviar Comprovante</b>
            </li>
        </ul>
    </div>
    <div class="lista">
        <ul >
            <li>
                <a href="#" id="00" class="btn_reservas" data-original-title="test">01</a>        
            </li>
            <li>
                <a href="#" id="01" class="btn_reservas" data-original-title="test">02</a>        
            </li>
            <li>
                <a href="#" id="02" class="btn_reservas" data-original-title="test">03</a>        
            </li>
            <li>
                <a href="#" id="03" class="btn_reservas" data-original-title="test">04</a>        
            </li>
            <li>
                <a href="#" id="04" class="btn_reservas" data-original-title="test">05</a>        
            </li>
        </ul>
    </div> 
</div>
<div><hr>
<hr>
<hr></div>        
    <script src ="apps/numeros.js"></script>

</body>
</html>

javascript html css

  • The tag a is used for links, in your case use span instead of a

1 answer

1


When you have an element <a> with the attribute href equal to #, means that it will play the page p/the top, whenever q that element is clicked.

And why does that happen?

You see, the element <a> (anchor) when used to connect elements of the same page the way you are using it (with the value of href="#"), indicates that the browser should search for the element with the id indicated, as you passed absolutely no value after the #, the browser will simply scroll to the top of the page.

But suppose you have an element with attribute id="aqui" anywhere on the page and you have an anchor with href="#aqui", means that when the user clicks on this anchor, the browser will scroll directly to the element with id="aqui right at the top of the window.

When you use

  • 1

    It killed the riddle, I just had to put the #id, so my page would stop going back to the top, thank you very much.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.