salto de ancla mediante javascript

Question

salto de ancla mediante javascript

Tengo una pregunta que se encontrará muy a menudo. El problema es que en ninguna parte se puede encontrar una solución explícita.

Tengo dos problemas con respecto a los anclajes.

El objetivo principal debe ser obtener una url limpia y agradable sin hashes mientras usa anclas para saltar a una página.

Así que la estructura de los anclajes es:

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <a name="one">text 1</a>
    <a name="two">text 2</a>
    <a name="three" class="box">text 3</a>
</div>

De acuerdo, si hace clic en uno de los enlaces, la url cambiará automáticamente a

Www.domain.com/page#1

Al final esto debería ser justo:

Www.domain.com/page

Hasta ahora, todo bien. Ahora la segunda cosa es, cuando usted busca el Internet para ese problema usted encontrará javascript como solución.

He encontrado esta función:

function jumpto(anchor){
    window.location.href = "#"+anchor;
}

Y llamando a esa función con:

<a onclick="jumpto('one');">One</a>

Lo que será igual que antes. Añadirá el hash a la url. También he añadido

<a onclick="jumpto('one'); return false;">

Sin éxito. Así que si hay alguien que pudiera decirme cómo resolver esto realmente apreciaría.

Muchas Gracias.

97

javascript html href function anchor

Author: Mickael Leger, 2012-12-06

Source

5 answers

Creo que es una solución mucho más simple:

window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

Este método hace no recarga sitio web, y establece el foco en los anclajes lo que se necesita para el lector de pantalla.

11

Author: Adam111p,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-13 12:28:47

Tengo un botón para un mensaje que al hacer clic abre el diálogo de visualización y luego puedo escribir lo que quiero buscar y va a esa ubicación en la página. Utiliza javascript para responder al encabezado.

En el .archivo html que tengo:

<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

En el .archivo js tengo

function myFunction() {
    var input = prompt("list or new or quit");

    while(input !== "quit") {
        if(input ==="test100") {
            window.location.hash = 'test100';
            return;
// else if(input.indexOf("test100") >= 0) {
//   window.location.hash = 'test100';
//   return;
// }
        }
    }
}

Cuando escriba test100 en el prompt, entonces irá a donde he colocado span id="test100" en el archivo html.

Uso Google Chrome.

Nota: Esta idea viene de enlazar en la misma página usando

<a href="#test100">Test link</a>

Que al hacer clic se enviará al ancla. Para que funcione varias veces, desde la experiencia necesita recargar la página.

El crédito a la gente en stackoverflow (y posiblemente stackexchange, también) no puede recordar cómo reuní todos los bits y piezas. ☺

1

Author: S.Doe_Dude,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-24 20:07:22

Porque cuando lo haces

window.location.href = "#"+anchor;

Usted carga una nueva página, usted puede hacer:

<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>

<script>

    function getPosition(element){
        var e = document.getElementById(element);
        var left = 0;
        var top = 0;

        do{
            left += e.offsetLeft;
            top += e.offsetTop;
        }while(e = e.offsetParent);

        return [left, top];
    }

    function jumpTo(id){    
        window.scrollTo(getPosition(id));
    }

</script>

0

Author: Jonathan Tribouharet Vukovich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-06 02:42:51

No hay suficiente rep para un comentario.

El método basado en getElementById() en la respuesta seleccionada no funcionará si el ancla tiene name pero no id establecido (lo cual no se recomienda, pero sucede en el salvaje).

Algo a tener en cuenta si no tiene control del marcado del documento (por ejemplo, webextension).

El método basado en location en la respuesta seleccionada también se puede simplificar con location.replace:

function jump(hash) { location.replace("#" + hash) }

0

Author: cmc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-10 15:25:36

score 151 · Accepted Answer

Puede obtener la coordenada del elemento de destino y establecer la posición de desplazamiento en ella. Pero esto es tan complicado.

Aquí hay una manera más perezosa de hacer eso:

function jump(h){
    var url = location.href;               //Save down the URL without hash.
    location.href = "#"+h;                 //Go to the target element.
    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
}

Esto utiliza replaceState para manipular la url. Si también quieres soporte para IE , entonces tendrás que hacerlo de la manera complicada :

function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}

Demo: http://jsfiddle.net/DerekL/rEpPA /
Otro con transición: http://jsfiddle.net/DerekL/x3edvp4t /

También Se puede utilizar .scrollIntoView:

document.getElementById(h).scrollIntoView();   //Even IE6 supports this

_{(Bueno, mentí. No es complicado en absoluto.)}