web-dev-qa-db-ja.com

アンカークリックでのジャンプを防ぐ方法は？

デフォルトのアンカー動作を無効にするためにe.preventDefault();を使用します。

クリックでターゲットへのジャンプアクションのみを防ぐ方法はありますか？

私は試した：

  var hash = window.location.hash;
  var link = $('a');
  $('a').click(function() {
    e.preventDefault();
    hash = "#"+link.attr("href");
  });

しかし、それは機能しません： http://jsfiddle.net/ynts/LgcmB/ 。

jqueryanchor
12
A. Z.
$(document).ready(function() {
  var hash = window.location.hash;
  var link = $('a');
  $('a').click(function(e) {
    e.preventDefault();
    hash = link.attr("href");
    window.location = hash;
  });
});

関数でイベント引数を指定する必要もあります。 eまたはeventと名前を付けると、操作できます。

26
Muhammad Talha Akbar

これは、さまざまなクライアントUIライブラリとフレームワークを備えたすべてのデスクトップおよびモバイルブラウザーで一貫して機能する、私が思いつくことができる唯一のソリューションです。スクロールが発生する前にウィンドウ座標を取得することで、現在のスクロール位置を元に戻して維持できます。

$('a').click(function (e) {
    var x = window.pageXOffset,
        y = window.pageYOffset;
    $(window).one('scroll', function () {
        window.scrollTo(x, y);
    })
});
10
TaeKwonJoe

only「ジャンプ」を防ぐには、アンカーで指定されているものとは異なるターゲット要素のIDを使用する必要があります。

例えば新しいタブへのリンクの使用については、

<a href="#new" />

ターゲット要素のマスクID

<div id="new-tab"></div>

次に、スクリプトで実際のハッシュにマスクを追加し、それを使用して要素を取得します。

$(window).on("hashchange", function(){
    var hash = this.location.hash;
    var mytab = $(hash + "-tab");
});

これにより、ブラウザーの履歴でハッシュの場所の変更が保存されます。これは、戻る/進むボタンで制御でき、ユーザーがハッシュを指定してページを入力した場合、hashchangeイベントでページの読み込み時に検出されます。

5
jumois

Onclickイベントをバインドしてアンカーし、結果としてreturn false;を指定する必要があります。 return false;ステートメントにより、デフォルトのクリック動作（ジャンプ）が機能しなくなります。あなたはここでより多くの情報を見つけることができます： ページをロードするときにアンカー「ジャンプ」を無効にする方法？

3
Sergei Smirnov

関数にイベントを渡す必要があります。

         var hash = window.location.hash;
         var link = $('a');
         //pass event here
         $('a').click(function(e) {
           e.preventDefault();
           hash = "#"+link.attr("href");
         });
2
AgnosticDev

matchを^とともに使用すると、#で始まることを検出できます

$("a:link").on("click", function(e){
    if($(this).attr("href").match("^#")) {
        e.preventDefault();
        //some other stuff you want to do with the hash, like smooth scroll to anchor
        $('html, body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'fast');
    }
});
0
Fanky

このページの他の答えを最初に試した後、これが私が必要なすべてでした：

  $('a').click(function (e) {
    e.preventDefault();
  });
0
Daniel