ページがアンカーポイントにジャンプした後に画面のスクロール位置を移動しますか？

Question

私は1つのWebページ上にメニューを持っており、そのページのリンクはページを対応するIDのセクションに移動します。しかし、各セクションの上部を覆っている粘着性のあるヘッダーがあるので、私はわずかにスクロールして補正します。

ページをセクションに移動した後に、ページをスクロールする方法を50px と決めようとしています。各リンクで.click()イベントリスナーを試してみましたが、コールバックが発行された後にページが移動して、スクロールしようとしたことを否定しているようです。

私のコードは次のようになります。

HTML：

<ul id="menu"> 
    <li id="menu-item-1"><a href="#1">1</a></li> 
    <li id="menu-item-2"><a href="#2">2</a></li> 
    <li id="menu-item-3"><a href="#3">3</a></li> 
    <li id="menu-item-4"><a href="#4">4</a></li> 
</ul> 

JS：（2つの内部行はコンソールでは動作しなくページのコード自体に）

$('#menu-item-1 a').click(function(){ 
    var y = $(window).scrollTop(); 
    $(window).scrollTop(y-50); 
}); 

リンクアクションが完了するのを待ち受けて、スクロールコードを実行する方法はありますか？

Answer 1

あなたはタイムアウトを設定してみました（目立たない）

また、あなたがこの

$('li > a').click(function(){ 
    setTimeout(function(){ 
     var y = $(window).scrollTop(); 
     $(window).scrollTop(y-50); }, 1); 
}); 

のようなリチウム項目内のすべてのAタグを処理するためにあなたのクリックイベントを変更することができますが、それは、フリッカ効果がありますあなたが観察されたように、ここであなたhttps://jsfiddle.net/fxabnk4o/16/

Answer 2

用のサンプルフィドルは次のとおりです。

コールバックが発行された後、ページがタグを固定する取り付けたあなたイベントがアンカータグのデフォルト動作前に実行されますので、これが起こる

をスクロールする私の試みを否定、移動したことが表示されます。 idを使用していますので、JavaScriptを使用してスクロールすることもできます。 http://plnkr.co/edit/FzHYaxMCeOMTvWurtNRe?p=preview

<ul id="menu"> 
    <li id="menu-item-1"><a href="#1" onClick = "handleClick(event, 1)">1</a></li> 
    <li id="menu-item-2"><a href="#2" onClick = "handleClick(event, 2)">2</a></li> 
    <li id="menu-item-3"><a href="#3" onClick = "handleClick(event, 3)">3</a></li> 
    <li id="menu-item-4"><a href="#4" onClick = "handleClick(event, 4)">4</a></li> 
</ul> 

function handleClick(e, scrollElemId){ 
    e.preventDefault(); 
    window.scrollTo(0,document.getElementById(scrollElemId).offsetTop+50); 
}