jangkar melompat dengan menggunakan javascript

129

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.

montok
sumber
Tidak yakin tentang ini, tetapi Anda bisa mencoba menulis secara manual ke properti hash setelah lompat. Misalnya mengatur batas waktu di pengendali onclick yang ditetapkan window.location.hash=''.
Jeff
Maksud Anda, Anda tidak ingin # ditampilkan di URL saat melompat ke bagian lain di laman web yang sama?
Roger Ng
2
Dalam hal ini Anda harus memanipulasi scrollTop jendela, biasanya oleh window.scrollToatau pembantu jQuery yang sesuai: stackoverflow.com/questions/6677035/jquery-scroll-to-element atau stackoverflow.com/questions/500336/…
Frank van Puffelen
@ Jeff - Jika Anda melakukannya location.hash='', #tetap ada di sana.
Derek 朕 會 功夫
Tolong jangan lakukan itu. Hash bagus saat menyimpan halaman di bookmark Anda.
Marco Sulla

Jawaban:

204

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

Derek 朕 會 功夫
sumber
1
Tikus !!
Tautannya
1
@ Mawg Rupanya mereka telah menghapus kemampuan untuk menggunakan add /showdi akhir url.
Derek 朕 會 功夫
11
"Bahkan IE6 mendukung ini" adalah komentar terbaik yang pernah saya lihat.
Josh
3
@ Black Tidak ada yang namanya elemen "jQuery". Jika Anda ingin mendapatkan elemen pertama dari kueri Anda, lakukan $(mySelector)[0].scrollIntoView().
Derek 朕 會 功夫
4
1+ untuk scrollIntoView. 1- untuk menyebutkannya terakhir.
Yay295
12

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.

Adam111p
sumber
Dan apa yang jarang bekerja pada IE, ini bekerja pada semua IE;)
Adam111p
5
Saya berakhir denganwindow.location = window.location.origin + window.location.pathname + '#hash';
Alex
Ini memuat ulang halaman untuk saya. Namun, jawaban yang diterima akhirnya berhasil, tetapi saya berharap ini lebih pendek.
HoldOffHunger
3

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) }
cmc
sumber
1

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>
Jonathan Vukovich-Tribouharet
sumber
3
Saya tidak berpikir menambahkan hash menjadikannya halaman baru.
Derek 朕 會 功夫
5
Itu tidak memuat ulang halaman.
Derek 朕 會 功夫
Anda benar, itu tidak memuat ulang halaman. Saya mencoba di konsol dengan chrome dan favicon dimuat ulang.
Jonathan Vukovich-Tribouharet
Di Firefox terbaru, perubahan hash tampaknya memaksa memuat ulang untuk iFrames (dalam atribut src). Saya menganggap ini sebagai bug browser, tetapi sesuatu yang harus diperhatikan.
Beejor
1

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

S.Apakah Bung?
sumber