javascript - que - title tag html5

ancla saltando usando javascript

Question

hola 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 ningún hash en ella mientras usa anclajes para saltar en una página.

entonces 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 aquí todo bien. ahora lo segundo es que cuando busque en Internet ese problema, 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>

qué será lo mismo que antes agregará el hash a la url. también agregué

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

sin éxito. así que si hay alguien que pueda decirme cómo resolver esto, realmente lo agradecería.

Muchas gracias.

Answer 1

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

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

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

Answer 2

No es suficiente representante para un comentario.

El método basado en getElementById () en la respuesta seleccionada no funcionará si el ancla tiene name pero no establece el id (lo cual no es recomendable, pero sí sucede en la naturaleza).

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

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

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

Answer 3

Porque cuando lo haces

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

Cargas una página nueva, puedes 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>

Answer 4

Puede obtener la coordenada del elemento objetivo 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 usa 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
}​

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

También puede usar .scrollIntoView :

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

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

Answer 5

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

En el archivo .html 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 escribo test100 en el prompt, irá a donde he colocado span id = "test100" en el archivo html.

Yo uso Google Chrome.

Nota: Esta idea proviene de vincular en la misma página usando

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

que al hacer clic lo enviará al ancla. Para que funcione varias veces, por experiencia necesita volver a cargar la página.

El crédito para la gente en (y posiblemente stackexchange, también) no puedo recordar cómo reuní todos los pedazos. ☺