anchor jumping za pomocą javascript

Mam pytanie, które będzie się pojawiać bardzo często. Problem w tym, że nigdzie nie można znaleźć jednoznacznego rozwiązania.

Mam dwa problemy dotyczące kotwic.

Głównym celem powinno być uzyskanie ładnego, czystego adresu URL bez żadnych skrótów podczas korzystania z kotwic do przeskakiwania strony.

Zatem struktura kotwic jest następująca:

<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>

OK, jeśli klikniesz jeden z linków, na który zostanie automatycznie zmieniony adres URL

www.domena.com/page#1

Na koniec powinno to być po prostu:

www.domena.com/page

Na razie w porządku. Po drugie, kiedy przeszukasz Internet w poszukiwaniu tego problemu, znajdziesz javascriptrozwiązanie.

Znalazłem tę funkcję:

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

i wywołując tę ​​funkcję za pomocą:

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

co będzie takie samo jak wcześniej. Doda hash do adresu URL. Dodałem też

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

bezskutecznie. Więc jeśli jest ktoś, kto mógłby mi powiedzieć, jak to rozwiązać, byłbym wdzięczny.

Wielkie dzięki.

Możesz uzyskać współrzędne elementu docelowego i ustawić na niego pozycję przewijania. Ale to jest takie skomplikowane.

Oto bardziej leniwy sposób na zrobienie tego:

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.
}

Służy replaceStatedo manipulowania adresem URL. Jeśli chcesz również obsługiwać IE , będziesz musiał to zrobić w skomplikowany sposób :

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/
Kolejny z przejściem: http://jsfiddle.net/DerekL/x3edvp4t/

Możesz również użyć .scrollIntoView:

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

_{(Cóż, skłamałem. To wcale nie jest skomplikowane.)}

Myślę, że jest to znacznie prostsze rozwiązanie:

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

Ta metoda nie powoduje ponownego załadowania witryny sieci Web i ustawia fokus na zakotwiczeniach, które są potrzebne dla czytnika ekranu.

Za mało przedstawiciela na komentarz.

Metoda getElementById()oparta na wybranej odpowiedzi nie zadziała, jeśli kotwica została ustawiona, nameale nie została idustawiona (co nie jest zalecane, ale zdarza się w środowisku naturalnym).

Coś, o czym należy pamiętać, jeśli nie masz kontroli nad znacznikami dokumentu (np. Rozszerzenie internetowe).

locationMetoda oparta na wybranej odpowiedź może być uproszczone location.replace:

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

Ponieważ kiedy to robisz

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

Załadujesz nową stronę, możesz zrobić:

<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>

Mam przycisk z monitem, który po kliknięciu otwiera okno dialogowe, a następnie mogę napisać, co chcę wyszukać, i przechodzi do tego miejsca na stronie. Używa javascript, aby odpowiedzieć na nagłówek.

W pliku .html mam:

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

W pliku .js, który mam

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

Kiedy napiszę test100 w monicie, przejdzie do miejsca, w którym umieściłem span id = "test100" w pliku html.

Używam Google Chrome.

Uwaga: ten pomysł pochodzi z linków na tej samej stronie przy użyciu

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

który po kliknięciu wyśle ​​do kotwicy. Aby to działało wiele razy, z doświadczenia trzeba przeładować stronę.

Podziękowania dla ludzi z stackoverflow (i prawdopodobnie również stackexchange) nie pamiętają, jak zebrałem wszystkie bity i elementy. ☺