web-dev-qa-db-ja.com

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

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

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

実際にそれが停止していた行であるかどうかを確認するために、アラートを前後に配置し、最初のアラートのみが消えます。コードは次のとおりです。

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

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

javascriptjqueryscrollscrollto
95
Matt Doak

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

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

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

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

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

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

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

41
Todd

html対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/ をご覧ください。

15
complistic

構文が少し間違っているようです...コードに基づいて、800msで100pxを下にスクロールしようとしていると仮定していますが、そうであれば（scrollTo 1.4.1を使用して）：

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

実際には

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');
}
6
Tim