jQueryは、.scroll（ハンドラ）を使用して要素にスクロールします。

Question

ページの上から一定の距離をスクロールした後、ページの対象要素にスクロールしようとしています。したがって、要素へのスクロールは.scroll（）イベントによってトリガされます。問題は、このイベントの後、このスクロール位置にスクロールしてページスティックをトリガされたということですが

$(document).scroll(function(e) { 
    if ($(document).scrollTop() > 250) { 
     $('html, body').animate({ 
      scrollTop: $("#cy-hero-image").offset().top 
     }, 650); 
    } 
}); 

：私は、次のコードを使用してこれを実行することができました。ページの上からスクロールしたときに一度だけこのページ位置にジャンプするこのコードを書くにはどうすればよいですか？

ここに私がこれまで持っていたもののJSFiddleがあります。

Answer 1

それは上から来た場合は、チェックする変数を追加することができます。

var startsFrom = 0; 
$(document).scroll(function(e) { 
    if($(document).scrollTop() == 0) //you can adjust it to match whatever you want 
    startsFrom = 0; 
    if ($(document).scrollTop() > 250 && startsFrom == 0) { 
    startsFrom = $(document).scrollTop(); 
    $('html, body').animate({ 
     scrollTop: $("#targeted-element").offset().top 
    }, 650); 
    } 
}); 

https://jsfiddle.net/pdyu3f5b/14/

Answer 2

関数に名前を付け、.one()を使用してハンドラを添付します。ブレークポイントが満たされていない場合は、ハンドラを再接続します。

var myScrollFunc = function(e){ 
    if ($(document).scrollTop() > 250) { 
    $('html, body').animate({ 
     scrollTop: $("#targeted-element").offset().top 
    }, 650); 
    } else { 
    $(document).one('scroll', myScrollFunc); 
    } 
} 

$(document).one('scroll', myScrollFunc); 

JSFiddle

Answer 3

それは

var myScroll = function(e) { 
    if ($(document).scrollTop() > 250) { 
     $('html, body').animate({ 
      scrollTop: $("#cy-hero-image").offset().top 
     }, 650); 
     $(document).off(e); 
    } 
}); 
$(document).on('scroll', myScroll); 

Answer 4

を使用しています後だけスクロールハンドラを削除し、それを試してみてください。 あなたはページの上部を訪れている間毎回働いています。好奇心のうち

var isScroll = true; 
$(document).scroll(function(e) { 
    if ($(document).scrollTop() > 250 && isScroll) { 
    isScroll = false; 
    $('html body').animate({ 
     scrollTop: $("#targeted-element").offset().top 
    }, 650); 
    }else if($(document).scrollTop() < 250){ 
    isScroll = true; 
    } 
}); 

JSFiddle