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>

さて、あなたがいずれかのリンクをクリックすると、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;">

成功なし。ですから、これを解決する方法を教えてくれる人がいれば、本当にありがたいです。

どうもありがとう。

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

これを行う簡単な方法を次に示します。

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

これは replaceState、URLの操作にします。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/
トランジション付きの別のもの：http : //jsfiddle.net/DerekL/x3edvp4t/

あなたも使うことができます.scrollIntoView：

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

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

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

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

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

コメントの担当者が不十分です。

選択された回答のgetElementById（）ベースのメソッドは、アンカーがある場合は機能しnameませんが、id設定され設定されは機能しません（推奨されませんが、実際に発生します）。

ドキュメントのマークアップを制御できない場合に心に留めておくべきこと（例：webextension）。

location選択した回答のベースの方法は、次のように簡略化することもできますlocation.replace。

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

あなたがするとき

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>

クリックすると表示ダイアログが開くプロンプトのボタンがあり、検索したいものを記述して、ページのその場所に移動できます。ヘッダーに応答するために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;
// }
        }
    }
}

test100を書くときをプロンプトと、htmlファイルのspan id = "test100"を配置した場所に移動します。

Google Chromeを使用しています。

注：このアイデアは、同じページにリンクして

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

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

stackoverflow（そしておそらくstackexchangeも）の人々の功績は、私がどのようにすべての断片を集めたかを思い出せません。☺