JQuery $ .scrollTo（）関数を使用してウィンドウをスクロールする方法

ユーザーがドキュメントの上部に近づくたびに100pxスクロールダウンしようとしています。

ユーザーがドキュメントの上部に近づいたときに関数を実行していますが、.scrollTo関数が機能していません。

アラートを前後に配置して、それが実際に回線であったかどうかを確認し、それが停止していたことを確認しました。最初のアラートのみがオフになりました。コードは次のとおりです。

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

他の多くのjquery関数を使用していて、すべて正常に機能しているため、jqueryページが適切にリンクされていることがわかります。また、上から「px」を削除しようとしましたが、違いはないようです。

それが機能しない場合は、jQueryのscrollTopメソッドを使用してみませんか？

$("#id").scrollTop($("#id").scrollTop() + 100);

スムーズにスクロールしたい場合は、基本的なjavascript setTimeout / setInterval関数を使用して、設定された時間にわたって1pxずつスクロールすることができます。

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

jQueryがアニメーション変数としてscrollTopをサポートするようになりました。

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

スムーズにスクロールするために、setTimeout / setIntervalを実行する必要がなくなりました。

htmlvsのbody問題を回避するために、CSSを直接​​アニメーション化するのではなくwindow.scrollTo();、各ステップを呼び出すことでこれを修正しました。

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

これは、クロスブラウザーJavaScriptを使用しているため、更新の手間をかけずにうまく機能します。

jQueryのanimate関数で実行できることの詳細については、http：//james.padolsey.com/javascript/fun-with-jquerys-animate/を参照してください。

構文が少し間違っているように見えます...私はあなたのコードに基づいて、800msで100pxを下にスクロールしようとしていると想定しています。

$.scrollTo('+=100px', 800, { axis:'y' });

実際には

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

うまく動作し、パディングをサポートします。マージンを簡単にサポートすることもできます-完了については以下を参照してください

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}