web-dev-qa-db-ja.com

JavaScriptを使用したアンカージャンプ

よくある質問があります。問題は、明示的な解決策が見つからないことです。

アンカーに関して2つの問題があります。

主な目的は、アンカーを使用してページにジャンプする際に、ハッシュを含まずにきれいなURLを取得することです。

そのため、アンカーの構造は次のとおりです。

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

さて、あなたがリンクの1つをクリックすると、URLは自動的にに変わります。

www.domain.com/page#1

最後にこれはちょうどなるはずです：

www.domain.com/page

ここまでは順調ですね。 2つ目は、インターネットでその問題を検索すると、解決策としてjavascriptが見つかることです。

私はこの機能を見つけました：

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

そしてその関数を次のように呼び出します。

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

以前と同じようになります。 URLにハッシュを追加します。私も追加しました

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

成功せずに。それで、これを解決する方法を私に言うことができる誰かがいるならば、私は本当に感謝するでしょう。

どうもありがとう。

javascripthtmlfunctionanchorhref
109
bonny

ターゲット要素の座標を取得し、それにスクロール位置を設定できます。しかしこれはとても複雑です。

これを行うための怠惰な方法は次のとおりです。

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

これは、URLを操作するために replaceState を使用します。 IEのサポート も必要な場合は、 複雑な方法 ：

function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}​

デモ： http://jsfiddle.net/DerekL/rEpPA/
もう一つのw/transition： http://jsfiddle.net/DerekL/x3edvp4t/

.scrollIntoView を使うこともできます。

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

（うーん、うそをついた。まったく複雑ではない。）

171
Derek 朕會功夫

私はそれがはるかに簡単な解決策だと思います：

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

このメソッドはウェブサイトをリロードせず、アンカーにフォーカスを設定します。スクリーンリーダーに必要なもの.

11
Adam111p

クリックすると表示ダイアログが開くプロンプト用のボタンがあります。それから検索したいものを書くことができ、ページ上のその場所に移動します。それはヘッダーに答えるためにJavaScriptを使用します。

.htmlファイルには、次のものがあります。

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

.jsファイルに私が持っている

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

プロンプトにtest1と書くと、htmlファイルのspan id = "test100"の位置に移動します。

Google Chromeを使用しています。

注：このアイデアは、同じページにリンクしていることから来ています。

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

クリックするとアンカーに送信されます。それが複数回動作するためには、経験からページをリロードする必要があります。

Stackoverflow（そしておそらくstackexchangeも）での人々の功績は、私がすべての部分を集めた方法を覚えていることができません。 ☺

1
S.Doe_Dude

コメントには不十分な担当者。

アンカーにnameが設定されていてもidが設定されていない場合、選択された回答のgetElementById（）ベースのメソッドは機能しません（これは推奨されませんが、実際には行われます）。

文書のマークアップを制御できない場合に気を付けておくべきこと（たとえば、webextension）。

選択した回答のlocationベースのメソッドもlocation.replaceで単純化することができます。

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

あなたがするとき

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

あなたは新しいページをロードします、あなたはすることができます：

<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>
0
Jonathan Vukovich-Tribouharet