アンカータグまでプログラムでスクロールする

StackOverflow https://stackoverflow.com/questions/265774

  •  06-07-2019
  •  | 
  •  

質問

次のコードを検討してください：

<a href="#label2">GoTo Label2</a>
... [content here] ...
<a name="label0"></a>More content
<a name="label1"></a>More content
<a name="label2"></a>More content
<a name="label3"></a>More content
<a name="label4"></a>More content

「GoTo Label2」をクリックすることをエミュレートする方法はありますか？コードを介してページ上の適切な領域にスクロールするリンク？

編集：受け入れ可能な代替手段は、ページにすでに存在するunique-idを持つ要素までスクロールすることです。これが実行可能なソリューションである場合、アンカータグを追加します。

役に立ちましたか？

解決

このJSは、要素にもIDを追加すると、一般的にうまく機能しました。

document.getElementById('MyID').scrollIntoView(true);

これは、コンテンツが表示されるようにスクロール可能なdivなどを配置するので便利です。

他のヒント

javascriptの使用：

window.location.href = '#label2';

サーバー/コードビハインドから実行する必要がある場合は、このJavascriptを発行して、そのページのスタートアップスクリプトとして登録するだけです。

サーバー側からアンカーへの移動。例はc＃です。

ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#form';", true);

これは機能すると思います：

window.location="<yourCurrentUri>#label2";

解決策

document.getElementById('MyID').scrollIntoView(true);

ほとんどすべてのブラウザーでうまく機能しますが、一部のブラウザーや一部のモバイル（一部のBlackberryバージョンなど）では＆quot; scrollIntoView＆quot;に気付きました。関数が認識されないため、このソリューションを検討します（前のものより少しい）：

window.location.href = window.location.protocol + "//" + window.location.host + 
                       window.location.pathname + window.location.search + 
                       "#MyAnchor";

要素がアンカータグの場合、次のことができるはずです。

document.getElementsByName('label2')[0].focus();

いいえ＆quot;＃＆quot; window.location.hashを使用する場合

たとえば、 http://www.example.com/mypage.htm#label2

のように、名前を追加して新しいURLを開くことができます。

JavaScriptで、

location.href = location.href + '#label2';
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top