que - window location origin javascript

Modificando document.location.hash sin desplazamiento de página

Question

Tenemos algunas páginas que usan ajax para cargar contenido y hay algunas ocasiones en las que necesitamos enlaces profundos en una página. En lugar de tener un enlace a "Usuarios" y decirle a las personas que hagan clic en "configuración", es útil poder vincular personas a la configuración de usuario.aspx #

Para permitir que las personas nos proporcionen enlaces correctos a secciones (para soporte técnico, etc.) lo tengo configurado para modificar automáticamente el hash en la URL cada vez que se hace clic en un botón. El único problema, por supuesto, es que cuando esto sucede, también desplaza la página a este elemento.

¿Hay alguna forma de desactivar esto? Debajo está cómo estoy haciendo esto hasta ahora.

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass(''selected'');
     s=$(document.location.hash).addClass(''selected'').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass(''selected'');
            $(this).addClass(''selected'');
            document.location.hash=$(this).attr("id")
            //return false;
    });
});

Esperaba que el resultado fuera return false; evitaría que la página se desplazara, pero simplemente hace que el enlace no funcione en absoluto. Así que eso solo está comentado por ahora, así puedo navegar.

¿Algunas ideas?

Answer 1

Agregando esto aquí porque las preguntas más relevantes han sido marcadas como duplicados señalando aquí ...

Mi situación es más simple:

• el usuario hace clic en el enlace ( a[href=''#something''] )
• el manejador de clics hace: e.preventDefault()
• Función smoothscroll: $("html,body").stop(true,true).animate({ "scrollTop": linkoffset.top }, scrollspeed, "swing" );
• luego window.location = link;

De esta forma, se produce el desplazamiento, y no hay salto cuando se actualiza la ubicación.

Answer 2

Creo que debes restablecer el desplazamiento a su posición antes de hashchange.

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash) {
        $("#buttons li a").removeClass(''selected'');
        s=$(document.location.hash).addClass(''selected'').attr("href").replace("javascript:","");
        eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function() {
            var scrollLocation = $(window).scrollTop();
            $("#buttons li a").removeClass(''selected'');
            $(this).addClass(''selected'');
            document.location.hash = $(this).attr("id");
            $(window).scrollTop( scrollLocation );
    });
});

Answer 3

Creo que puedo haber encontrado una solución bastante simple. El problema es que el hash en la URL también es un elemento de la página a la que se desplaza. si solo añado algo de texto al hash, ¡ahora ya no hace referencia a un elemento existente!

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass(''selected'');
     s=$(document.location.hash.replace("btn_","")).addClass(''selected'').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass(''selected'');
            $(this).addClass(''selected'');
            document.location.hash="btn_"+$(this).attr("id")
            //return false;
    });
});

Ahora la URL aparece como page.aspx#btn_elementID que no es una identificación real en la página. Solo eliminé "btn_" y obtuve el ID del elemento real

Answer 4

De acuerdo, este es un tema bastante antiguo, pero pensé que lo haría ya que la respuesta ''correcta'' no funciona bien con CSS.

Esta solución básicamente evita que el evento de clic mueva la página para que podamos obtener primero la posición de desplazamiento. A continuación, agregamos manualmente el hash y el navegador activa automáticamente un evento hashchange . Capturamos el evento hashchange y volvemos a la posición correcta. Una devolución de llamada separa y evita que su código cause un retraso al mantener su piratería en un lugar.

var hashThis = function( $elem, callback ){
    var scrollLocation;
    $( $elem ).on( "click", function( event ){
        event.preventDefault();
        scrollLocation = $( window ).scrollTop();
        window.location.hash = $( event.target ).attr(''href'').substr(1);
    });
    $( window ).on( "hashchange", function( event ){
        $( window ).scrollTop( scrollLocation );
        if( typeof callback === "function" ){
            callback();
        }
    });
}
hashThis( $( ".myAnchor" ), function(){
    // do something useful!
});

Answer 5

Erm, tengo un método algo crudo pero definitivamente funcional.
Simplemente almacene la posición de desplazamiento actual en una variable de temperatura y luego reiníciela después de cambiar el hash. :)

Entonces para el ejemplo original:

$("#buttons li a").click(function(){
        $("#buttons li a").removeClass(''selected'');
        $(this).addClass(''selected'');

        var scrollPos = $(document).scrollTop();
        document.location.hash=$(this).attr("id")
        $(document).scrollTop(scrollPos);
});

Answer 6

Esta es mi solución para pestañas habilitadas para historial:

    var tabContainer = $(".tabs"),
        tabsContent = tabContainer.find(".tabsection").hide(),
        tabNav = $(".tab-nav"), tabs = tabNav.find("a").on("click", function (e) {
                e.preventDefault();
                var href = this.href.split("#")[1]; //mydiv
                var target = "#" + href; //#myDiv
                tabs.each(function() {
                    $(this)[0].className = ""; //reset class names
                });
                tabsContent.hide();
                $(this).addClass("active");
                var $target = $(target).show();
                if ($target.length === 0) {
                    console.log("Could not find associated tab content for " + target);
                } 
                $target.removeAttr("id");
                // TODO: You could add smooth scroll to element
                document.location.hash = target;
                $target.attr("id", href);
                return false;
            });

Y para mostrar la última pestaña seleccionada:

var currentHashURL = document.location.hash;
        if (currentHashURL != "") { //a tab was set in hash earlier
            // show selected
            $(currentHashURL).show();
        }
        else { //default to show first tab
            tabsContent.first().show();
        }
        // Now set the tab to active
        tabs.filter("[href*=''" + currentHashURL + "'']").addClass("active");

Tenga en cuenta que *= en la llamada de filter . Esto es algo específico de jQuery, y sin él, sus pestañas habilitadas para historial fallarán.

Answer 7

Esta solución crea un div en el scrollTop real y lo elimina después de cambiar el hash:

$(''#menu a'').on(''click'',function(){
    //your anchor event here
    var href = $(this).attr(''href'');
    window.location.hash = href;
    if(window.location.hash == href)return false;           
    var $jumpTo = $(''body'').find(href);
    $(''body'').append(
        $(''<div>'')
            .attr(''id'',$jumpTo.attr(''id''))
            .addClass(''fakeDivForHash'')
            .data(''realElementForHash'',$jumpTo.removeAttr(''id''))
            .css({''position'':''absolute'',''top'':$(window).scrollTop()})
    );
    window.location.hash = href;    
});
$(window).on(''hashchange'', function(){
    var $fakeDiv = $(''.fakeDivForHash'');
    if(!$fakeDiv.length)return true;
    $fakeDiv.data(''realElementForHash'').attr(''id'',$fakeDiv.attr(''id''));
    $fakeDiv.remove();
});

opcional, desencadenar evento de anclaje en la carga de la página:

$(''#menu a[href=''+window.location.hash+'']'').click();

Answer 8

Hace poco estaba construyendo un carrusel que depende de window.location.hash para mantener el estado e hice el descubrimiento de que los navegadores Chrome y webkit obligarán a desplazarse (incluso a un objetivo no visible) con una sacudida incómoda cuando se window.onhashchange evento window.onhashchange .

Incluso intentando registrar un controlador que detiene la propagación:

$(window).on("hashchange", function(e) { 
  e.stopPropogation(); 
  e.preventDefault(); 
});

No hizo nada para detener el comportamiento predeterminado del navegador. La solución que encontré fue usar window.history.pushState para cambiar el hash sin desencadenar los efectos secundarios indeseables.

 $("#buttons li a").click(function(){
    var $self, id, oldUrl;

    $self = $(this);
    id = $self.attr(''id'');

    $self.siblings().removeClass(''selected''); // Don''t re-query the DOM!
    $self.addClass(''selected'');

    if (window.history.pushState) {
      oldUrl = window.location.toString(); 
      // Update the address bar 
      window.history.pushState({}, '''', ''#'' + id);
      // Trigger a custom event which mimics hashchange
      $(window).trigger(''my.hashchange'', [window.location.toString(), oldUrl]);
    } else {
      // Fallback for the poors browsers which do not have pushState
      window.location.hash = id;
    }

    // prevents the default action of clicking on a link.
    return false;
});

Luego puede escuchar tanto el evento hashchange normal como my.hashchange :

$(window).on(''hashchange my.hashchange'', function(e, newUrl, oldUrl){
  // @todo - do something awesome!
});

Answer 9

La otra forma de hacerlo es agregar un div oculto en la parte superior de la ventana gráfica. A este div se le asigna la identificación del hash antes de agregar el hash a la url ... por lo que no obtienes un desplazamiento.

Answer 10

No creo que esto sea posible. Hasta donde yo sé, la única vez que un navegador no se desplaza a un document.location.hash modificado.location.hash es si el hash no existe dentro de la página.

Este artículo no está directamente relacionado con su pregunta, pero analiza el comportamiento típico del navegador de cambiar document.location.hash

Answer 11

Paso 1: debe desactivar la ID del nodo, hasta que se haya configurado el hash. Esto se hace eliminando el ID del nodo mientras se está configurando el hash, y luego volviéndolo a agregar.

hash = hash.replace( /^#/, '''' );
var node = $( ''#'' + hash );
if ( node.length ) {
  node.attr( ''id'', '''' );
}
document.location.hash = hash;
if ( node.length ) {
  node.attr( ''id'', hash );
}

Paso 2: Algunos navegadores dispararán el desplazamiento en función del lugar donde se haya visto por última vez el nodo identificado, por lo que deberá ayudarlos un poco. Debe agregar un div adicional a la parte superior de la ventana gráfica, establecer su ID en el hash y luego retrotraer todo:

hash = hash.replace( /^#/, '''' );
var fx, node = $( ''#'' + hash );
if ( node.length ) {
  node.attr( ''id'', '''' );
  fx = $( ''<div></div>'' )
          .css({
              position:''absolute'',
              visibility:''hidden'',
              top: $(document).scrollTop() + ''px''
          })
          .attr( ''id'', hash )
          .appendTo( document.body );
}
document.location.hash = hash;
if ( node.length ) {
  fx.remove();
  node.attr( ''id'', hash );
}

Paso 3: Envuélvelo en un complemento y úsalo en lugar de escribir en location.hash ...

Answer 12

Si en su página utiliza el id como una especie de punto de anclaje, y tiene escenarios en los que desea que los usuarios agreguen #algo hasta el final de la url y haga que la página se desplace a esa sección #algo usando su propia animación definida. La función de JavaScript, el detector de eventos de hashchange no podrá hacer eso.

Si simplemente pones un depurador inmediatamente después del evento hashchange, por ejemplo, algo como esto (bueno, yo uso jquery, pero entiendes el punto):

$(window).on(''hashchange'', function(){debugger});

Notarás que tan pronto como cambies tu url y presiones el botón enter, la página se detendrá en la sección correspondiente inmediatamente, solo después de eso, se activará tu propia función de desplazamiento definida, y se desplazará a esa sección, que se ve muy mal.

Mi sugerencia es:

1. no use ID como punto de anclaje en la sección a la que desea desplazarse.

2. Si debe usar ID, como yo. En su lugar, use el detector de eventos ''popstate'', no se desplazará automáticamente a la sección que añada a la url, sino que puede llamar a su propia función definida dentro del evento popstate.

   $(window).on(''popstate'', function(){myscrollfunction()});

Finalmente, debe hacer un pequeño truco en su propia función de desplazamiento definida:

    let hash = window.location.hash.replace(/^#/, '''');
    let node = $(''#'' + hash);
    if (node.length) {
        node.attr(''id'', '''');
    }
    if (node.length) {
        node.attr(''id'', hash);
    }

elimine la identificación en su etiqueta y reiníciela.

Esto debería funcionar.

Answer 13

Solo agregue este código a jQuery en el documento listo

Ref: http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $(''a[href*=#]:not([href=#])'').click(function() {
    if (location.pathname.replace(/^///,'''') == this.pathname.replace(/^///,'''') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $(''[name='' + this.hash.slice(1) +'']'');
      if (target.length) {
        $(''html,body'').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Answer 14

Tengo un método más simple que funciona para mí. Básicamente, recuerda lo que realmente es el hash en HTML. Es un enlace de anclaje a una etiqueta de Nombre. Es por eso que se desplaza ... el navegador está intentando desplazarse a un enlace de anclaje. Entonces, ¡dale uno!

1. Justo debajo de la etiqueta BODY, ponga su versión de esto:

<a name="home"></a><a name="firstsection"></a><a name="secondsection"></a><a name="thirdsection"></a>

2. Nombra los DIV de tu sección con clases en lugar de ID.

3. En su código de procesamiento, quite la marca de almohadilla y reemplácela por un punto:

var trimPanel = loadhash.substring(1); //lose the hash var dotSelect = ''.'' + trimPanel; //replace hash with dot $(dotSelect).addClass("activepanel").show(); //show the div associated with the hash.

Finalmente, elimine element.preventDefault o return: false y permita que ocurra la navegación. La ventana se mantendrá en la parte superior, el hash se agregará a la URL de la barra de direcciones y se abrirá el panel correcto.

Answer 15

Un fragmento de tu código original:

$("#buttons li a").click(function(){
    $("#buttons li a").removeClass(''selected'');
    $(this).addClass(''selected'');
    document.location.hash=$(this).attr("id")
});

Cambiar esto a:

$("#buttons li a").click(function(e){
    // need to pass in "e", which is the actual click event
    e.preventDefault();
    // the preventDefault() function ... prevents the default action.
    $("#buttons li a").removeClass(''selected'');
    $(this).addClass(''selected'');
    document.location.hash=$(this).attr("id")
});

Answer 16

Use history.replaceState o history.pushState * para cambiar el hash. Esto no disparará el salto al elemento asociado.

Ejemplo

$(document).on(''click'', ''a[href^=#]'', function(event) {
  event.preventDefault();
  history.pushState({}, '''', this.href);
});

Demostración en JSFiddle

_{^{* Si quieres historial hacia adelante y hacia atrás}}

Comportamiento histórico

Si está utilizando history.pushState y no desea que la página se desplace cuando el usuario usa los botones de historial del navegador (hacia adelante / hacia atrás), consulte la configuración experimental de scrollRestoration (solo Chrome 46+) .

history.scrollRestoration = ''manual'';

• spec
• info

Soporte del navegador

• replaceState
• pushState
• polyfill

Answer 17

si utiliza el evento hashchange con el analizador hash, puede evitar acciones predeterminadas en los enlaces y cambiar la ubicación. agregue un carácter para tener diferencia con la propiedad id de un elemento

$(''a[href^=#]'').on(''click'', function(e){
    e.preventDefault();
    location.hash = $(this).attr(''href'')+''/'';
});

$(window).on(''hashchange'', function(){
    var a = /^#?chapter(/d+)-section(/d+)//?$/i.exec(location.hash);
});