jangkar melompat dengan menggunakan javascript

Saya punya pertanyaan yang akan sangat sering ditemukan. Masalahnya adalah bahwa tidak ada solusi eksplisit yang dapat ditemukan.

Saya memiliki dua masalah terkait jangkar.

Tujuan utamanya adalah untuk mendapatkan url bersih yang bagus tanpa hash di dalamnya saat menggunakan jangkar untuk melompat pada halaman.

Jadi struktur jangkar adalah:

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

Oke, jika Anda mengklik salah satu tautan, url akan otomatis berubah

www.domain.com/page#1

Pada akhirnya ini seharusnya hanya:

www.domain.com/page

Sejauh ini baik. Sekarang yang kedua adalah, ketika Anda mencari di internet untuk masalah itu Anda akan menemukan javascriptsolusi.

Saya telah menemukan fungsi ini:

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

dan memanggil fungsi itu dengan:

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

apa yang akan sama seperti sebelumnya. Ini akan menambahkan hash ke url. Saya juga menambahkan

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

tanpa keberhasilan. Jadi jika ada seseorang yang bisa memberi tahu saya cara mengatasi ini, saya akan sangat menghargai.

Terima kasih banyak.

Anda bisa mendapatkan koordinat elemen target dan mengatur posisi gulir padanya. Tapi ini sangat rumit.

Inilah cara yang lebih malas untuk melakukan itu:

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

Ini digunakan replaceStateuntuk memanipulasi url. Jika Anda juga menginginkan dukungan untuk IE , maka Anda harus melakukannya dengan cara yang rumit :

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/
Satu lagi dengan transisi: http://jsfiddle.net/DerekL/x3edvp4t/

Anda juga dapat menggunakan .scrollIntoView:

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

_{(Yah aku berbohong. Ini tidak rumit sama sekali.)}

Saya pikir ini solusi yang jauh lebih sederhana:

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

Metode ini tidak memuat ulang situs web, dan menetapkan fokus pada jangkar yang diperlukan untuk pembaca layar.

Tidak cukup perwakilan untuk komentar.

Metode berbasis getElementById () dalam jawaban yang dipilih tidak akan berfungsi jika jangkar telah nametetapi tidak iddisetel (yang tidak direkomendasikan, tetapi terjadi di alam liar).

Sesuatu yang perlu diingat jika Anda tidak memiliki kendali atas markup dokumen (mis. Webextension).

The locationmetode yang didasarkan pada jawaban yang dipilih juga dapat disederhanakan dengan location.replace:

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

Karena ketika Anda melakukannya

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

Anda memuat halaman baru, Anda dapat melakukan:

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

Saya memiliki tombol untuk prompt yang pada klik membuka dialog tampilan dan kemudian saya dapat menulis apa yang ingin saya cari dan pergi ke lokasi itu di halaman. Ini menggunakan javascript untuk menjawab header.

Pada file .html yang saya miliki:

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

Pada file .js yang saya miliki

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

Ketika saya menulis test100 ke prompt, maka itu akan pergi ke tempat saya meletakkan span id = "test100" di file html.

Saya menggunakan Google Chrome.

Catatan: Ide ini berasal dari menautkan menggunakan halaman yang sama

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

yang di klik akan mengirim ke jangkar. Agar dapat berfungsi beberapa kali, dari pengalaman perlu memuat ulang halaman.

Kredit kepada orang-orang di stackoverflow (dan mungkin juga stackexchange) juga tidak dapat mengingat bagaimana saya mengumpulkan semua bagian. ☺