Home / Questions / 20184
Accepted
Efrain Mejias C
Asked: 2020-08-11 12:44:16 +0800 CST 2020-08-11 12:44:16 +0800 CST

How to navigate on the same page without using the scroll?

  • 772

The main idea of ​​creating this function is not to use vertical scrolling, and from a click event of a button or other control to execute said function and navigate to a label <div>or a <a> specific label that is on the same page.

javascript

2 Answers

  1. Best Answer

    To navigate within the same page you must use an element with id (the target) and an anchor ( <a>) that points to said element, as follows:

    <a href="#id_del_elemento">Ir a tal parte</a>

...

<div id="id_del_elemento"> ... </div>

    The target element can be any element.

    <a href="#elid">Ir a el ID</a>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p id="elid">este es el elemento</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

    To do the same thing in javascript, you can do the following: The trick here is that you set the url hash to the element's id value, just like editing it by hand in the browser's url bar.

    function moverseA(idDelElemento) {
    location.hash = "#" + idDelElemento;
}

    and you use it

    moverseA("id_del_elemento"); // sin el #


    function moverseA(idDelElemento) {
  location.hash = "#" + idDelElemento;
}
    <button onclick="moverseA('elid')">Ir a el ID</button>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p id="elid">este es el elemento</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

    • 6

  2. rnd's answer is what you want. I am going to leave an alternative with Javascript (using jQuery) in which the scroll is animated so that the target element is not jumped, but a small transition is made when moving using animate:

    function saltarA(id, tiempo) {
  var tiempo = tiempo || 1000;
  $("html, body").animate({ scrollTop: $(id).offset().top }, tiempo);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p><a href="javascript:saltarA('#destino')">Saltar a destino</a></p>
<p>1</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>0</p>
<p>1</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>0</p>
<p id="destino">Destino!</p>
<p>1</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>0</p>
<p>1</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>0</p>

    • 4