javascript kullanarak çapa atlama

Çok sık bulunacak bir sorum var. Sorun şu ki, hiçbir yerde açık bir çözüm bulunamıyor.

Çapalarla ilgili iki sorunum var.

Ana hedef, bir sayfaya atlamak için çapa kullanırken içinde herhangi bir karma olmadan güzel ve temiz bir url elde etmek olmalıdır.

Yani çapaların yapısı:

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

Tamam, bağlantılardan birine tıklarsanız, url otomatik olarak

www.domain.com/page#1

Sonunda bu sadece:

www.domain.com/page

Çok uzak çok iyi. Şimdi ikinci şey, internette bu problemi javascriptaraştırdığınızda bir çözüm bulacaksınız .

Bu işlevi buldum:

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

ve bu işlevi çağırmak için:

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

eskisi gibi aynı olacak. Hash'i url'ye ekleyecektir. Ben de ekledim

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

başarısız. Yani bana bunu nasıl çözeceğimi söyleyebilecek biri varsa gerçekten minnettar olurum.

Çok teşekkürler.

Hedef elemanın koordinatını alabilir ve kaydırma konumunu ona ayarlayabilirsiniz. Ama bu çok karmaşık.

İşte bunu yapmanın daha tembel bir yolu:

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

Bu replaceState, url'yi değiştirmek için kullanılır. IE için de destek istiyorsanız , o zaman bunu karmaşık bir şekilde yapmanız gerekecektir :

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/
Başka bir geçiş w / http://jsfiddle.net/DerekL/x3edvp4t/

Ayrıca şunları da kullanabilirsiniz .scrollIntoView:

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

_{(Yalan söyledim. Hiç de karmaşık değil.)}

Bunun çok daha basit bir çözüm olduğunu düşünüyorum:

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

Bu yöntem , web sitesini yeniden yüklemez ve odağı ekran okuyucu için gerekli olan bağlantılara ayarlar .

Bir yorum için yeterli sayım yok.

Seçili yanıttaki getElementById () tabanlı yöntem, çapa ayarlanmışsa nameancak idayarlanmadıysa çalışmaz (bu önerilmez, ancak vahşi ortamda gerçekleşir).

Belge biçimlendirmesinin kontrolüne sahip değilseniz aklınızda bulundurmanız gereken bir şey (ör. Web uzantısı).

locationSeçilen cevap dayanan yöntem ile basitleştirilmiş olabilir location.replace:

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

Çünkü ne zaman yaparsan

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

Yeni bir sayfa yüklerseniz şunları yapabilirsiniz:

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

Tıklandığında ekran diyaloğunu açan ve ardından aramak istediğimi yazıp sayfadaki o konuma giden bir komut istemi için bir düğmem var. Başlığı yanıtlamak için javascript kullanır.

.Html dosyasında:

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

.Js dosyasında

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

Ben yazarken test100 istemi içine, o zaman ben html dosyasında yayılma id = "test100" yerleştirdik nereye gidecek.

Google Chrome kullanıyorum.

Not: Bu fikir, aynı sayfada,

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

hangi tıklama ile bağlantıya gönderilecektir. Birden çok kez çalışması için, deneyimden dolayı sayfayı yeniden yüklemeniz gerekir.

Stackoverflow'daki insanlara (ve muhtemelen stackexchange de) kredi, tüm parçaları ve parçaları nasıl topladığımı hatırlayamıyor. ☺