web-dev-qa-db-ja.com

href = "＃"でリンクすると、jqueryのSlidetoggleと一緒に使用するとページが上にスクロールします

重複の可能性：
JavaScriptをトリガーするリンクをクリックしたときに、Webページが上部にスクロールしないようにするにはどうすればよいですか？

私はjqueryのslidetoggleを使ってdivを表示/非表示にしています。スライドを制御する要素は、href = "＃"を持つテキストリンク（<\ a>内の一部のテキスト）であるため、リンク（下線、カーソルの変化）のように見えます。

問題は、リンクをクリックすると、スライド効果に加えて、ページが一番上にスクロールすることです。

href = "＃"をhref = ""に置き換えてみましたが、divの表示/非表示効果が無効になっています。タグName = "somename"に追加して、hrefをhref = "＃somename"に設定できると思いますが、そのようなトリックは使用しません。

なぜhref = "＃"はページを上にスクロールするのですか？

どんなアイデアも高く評価されます

jqueryscrolltogglehrefslide
27
samoyed

いくつかのオプション：

  1. クリックハンドラーの下部に_return false;_を配置すると、hrefは追跡されません。
  2. Hrefをjavascript:void(0);に変更します

  3. ハンドラーのイベントでpreventDefaultを呼び出します。

    _function( e ) {
  e.preventDefault();
  // your event handling code
}
_
74
rfunduk

追加する必要がありますreturn false;をクリックハンドラーに追加します。
これにより、ブラウザはクリックのデフォルトアクションを実行できなくなります。

5
SLaks

他の人があなたに解決策を与えました。しかし、具体的にあなたの質問に答えるために、#は現在のページを参照します。タグの解釈は、タグのtopを表示することなので、#タグは、現在のページの上部にスクロールします。

1
slebetman

_return false_またはevent.preventDefault()は、デフォルトのアクションが発生しないようにするためにクリックイベントハンドラーで必要なものです。 _<a>_のhrefを含む_#_要素は、ブラウザのビューポートをデフォルトのアクションとしてページの上部にジャンプさせます。

1
Russ Cam