3

ページの特定の部分に HTML リンクを追加すると、次のようになります。

<a href="#specific">test</a>

アドレス バーの URL が変更されていることに気付きました。アドレスバーが更新されずにそのようにリンクしているWebサイトに出くわしましたが. これはどのように可能ですか？

編集：URLを変更せずに機能させるのはAJAXソリューションかもしれません。私の記憶が正しければ、ページはリロードされず、宛先に直接移動しました...

4

5 に答える 5

9

jqueryプラグインscrollToを確認することをお勧めします。

http://jquery.com

そして、scrollToのリンクがいくつかあります

http://demos.flesler.com/jquery/scrollTo/

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

あなたはこのようなことをすることができます：

HTML

<a href="#scrollToMe" class="scrollLink">click me to scroll</a>
<div class="gap">a big gap</div>
<h1 id="scrollToMe">I should scroll to here without a # in the URL</h1>

javascript（jqueryとscrolltoプラグイン）

$(document).ready(function() {
    $(".scrollLink").click(function(e) {

        $.scrollTo($(this).attr("href"));    
        e.preventDefault();

    });

});

javascriptが行うことは、クラス「.scrollLink」を持つリンクがクリックされるたびに、クリックされた特定のリンクのhrefと同じIDを持つ要素までページを下にスクロールすることです。次に、e.preventDefault（）は、通常のハッシュリンクのように機能しなくなり、URLバーに表示されなくなります。

これがあなたのための実用的な例です：http：//jsfiddle.net/alexkey/c3jsY/7/

また、フレームセットにないバージョンなので、URLが変更されていないことがわかります。

http://fiddle.jshell.net/alexkey/c3jsY/7/show/light/

このアプローチにはいくつかの良い点があります

  1. ハッシュの表示を停止するリンクにscrollLinkクラスを適用するだけです（簡単です）
  2. 通常のhrefを使用します。これは、javascriptが無効になっている場合でもリンクが機能することを意味します。これは、アクセシビリティとおそらく検索エンジン最適化に適しています。
于 2011-11-25T21:34:05.457 に答える
0

JavaScript を使用してクリック イベントをインターセプトし、独自のカスタム ロジックを実行してから、ナビゲーション イベントをキャンセルして、URL が変更されないようにすることができます。

于 2011-11-25T17:09:00.193 に答える
0

ウィンドウを適切に配置するには、数値 (ここでは 200 として示されています) を試してみる必要があります。

<a href="javascript:void(0);" onclick="window.scroll(0,200);">test</a>
于 2011-11-25T17:21:41.977 に答える
0

多分あなたは次のようなことを試すことができます: window.scroll(0,150); 「(0,150)」の代わりに、ターゲットの座標を入れます。

于 2011-11-25T17:17:14.163 に答える
0

次のコードをインラインで使用できます。

<a href="javascript:void(0);" onclick="document.getElementById(\'bookmark\').scrollIntoView();"> link text </a>
<div id="bookmark">Jump to here</div>
于 2021-02-19T22:03:22.180 に答える