Ändern der Position.hash ohne die Seite zu scrollen

Ich glaube, ich fand eine Recht einfache Lösung. Das problem ist, dass der hash in der URL ist auch ein element auf der Seite, die Sie bekommen gescrollt. wenn ich Schreibe einfach einen text, den hash, jetzt ist es nicht mehr mit einem Verweis auf ein bestehendes element!

$(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;
    });
});

Nun die URL wird angezeigt, wie page.aspx#btn_elementID die ist nicht eine echte ID auf der Seite. Ich entfernen Sie einfach das "btn_" und nutzen Sie die aktuelle element-ID

InformationsquelleAutor Chris Barr

Einen Ausschnitt aus Ihrem ursprünglichen code:

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

Ändern:

$("#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")
});

InformationsquelleAutor Daniel

Okay, das ist ein ziemlich altes Thema, aber ich dachte, ich würde chip als die "richtige" Antwort nicht gut funktioniert mit CSS.

Diese Lösung im Grunde verhindert das click-Ereignis von verschieben der Seite, sodass wir die scroll-position zuerst. Dann werden wir manuell hinzufügen, der hash und der browser löst automatisch eine hashchange Veranstaltung. Wir erfassen die hashchange event und Blättern wieder in die richtige position. Eine callback-trennt und verhindert, dass dein code verursacht eine Verzögerung, indem Sie Ihre hash-hacking in einem Ort.

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!
});

InformationsquelleAutor Egor Kloos

Ich glaube nicht, dass dies möglich ist. Soweit ich weiß, nur die Zeit, die ein browser nicht scrollen, um eine veränderte document.location.hash ist, wenn der hash nicht existiert innerhalb der Seite.

Dieser Artikel nicht direkt mit deiner Frage, aber es beschreibt typische browser-Verhalten zu ändern document.location.hash

InformationsquelleAutor Ben S

Hinzufügen dieses hier, weil der weitere relevante Fragen wurden als Duplikate gekennzeichnet zeigen hier...

Meine situation ist einfacher:

• Benutzer auf den link klickt (a[href='#something'])
• klicken Sie auf handler: e.preventDefault()
• smoothscroll-Funktion: $("html,body").stop(true,true).animate({ "scrollTop": linkoffset.top }, scrollspeed, "swing" );
• dann window.location = link;

Diese Weise den Blättern Auftritt, und es gibt kein springen, wenn der Standort aktualisiert wird.

InformationsquelleAutor ptim

Hier ist meine Lösung für die Geschichte-aktivierte Registerkarten:

    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;
            });

Werden und die zuletzt ausgewählte Registerkarte:

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");

Hinweis: die *= auf die filter nennen. Dies ist ein jQuery-spezifische Sache, und ohne dass es Ihre Geschichte-aktivierten tabs, wird scheitern.

InformationsquelleAutor user1429980

Habe ich eine einfachere Methode, die funktioniert für mich. Im Grunde, denken Sie daran, was der hash ist eigentlich in HTML. Es ist ein Anker-link, um einen Name-tag. Das ist, warum es scrollt...der browser versucht zu scrollen, um einen Anker-link. So, geben Sie es ein!

1. Direkt unter dem BODY-tag, setzen Sie Ihre version von dieser:

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

1. Namen Ihrer Sektion divs mit Klassen anstelle von IDs.

2. In Ihre Verarbeitung-code, entfernen Sie das hash-Symbol und ersetzen mit einem Punkt:

 var trimPanel = loadhash.substring(1); //verlieren die hash 

var dotSelect = '.' + trimPanel; //ersetzen hash mit dot 

$(dotSelect).addClass("activepanel").show(); //zeige das div im Zusammenhang mit der hash. 

Schließlich, Sie auf element entfernen.preventDefault oder return: false und ermöglichen den nav zu passieren. Das Fenster bleibt an der Spitze, der hash angehängt werden, um die Adressleiste die url und das richtige Fenster öffnet.

InformationsquelleAutor ColdSharper

Wenn auf Ihrer Seite, die Sie verwenden, id wie eine Art Ankerpunkt, und Sie haben Szenarien, wo Sie wollen, um Benutzern das Anhängen von #etwas an das Ende der url und die Seite scrollen, um das #etwas Abschnitt, indem Sie mit Ihrem eigenen definierten animierte javascript-Funktion, hashchange event-listener werden nicht in der Lage, das zu tun.

Wenn Ihr einfach einen debugger sofort nach dem hashchange-event, zum Beispiel so etwas(gut, ich jquery verwenden, aber Sie erhalten den Punkt):

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

Werden Sie feststellen, dass, sobald Sie Ihre url ein, und drücken Sie die enter-Taste, wird die Seite hält Sie im entsprechenden Abschnitt sofort, nur danach, Ihre eigenen definierten Scroll-Funktion wird ausgelöst, und es Art von Schriftrollen, die Sektion, die sehr schlecht aussieht.

Mein Vorschlag ist:

1. verwenden Sie keine id, wie Sie Ihren Ankerpunkt, um den Abschnitt Sie möchten, um zu Blättern.

2. Wenn Sie verwenden müssen-ID, wie ich es Tue. Verwenden Sie 'popstate' event-listener statt, es wird nicht automatisch ein Bildlauf bis zum Abschnitt, den Sie an die url angefügt wird, stattdessen, Sie können rufen Sie Ihre eigene benutzerdefinierte Funktion innerhalb des popstate-event.

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

Schließlich müssen Sie noch ein bisschen trick in Ihrem eigenen definierten Scroll-Funktion:

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

löschen-id auf dem tag und es zurücksetzen.

Dies sollte den trick tun.

InformationsquelleAutor Shuwei