どのようにスクロールのウィンドウでJQuery$.scrollTo()関数
-
08-07-2019 - |
質問
ようにしているスクロール下に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を使用する必要はなくなりました。
の html
vs body
な問題については、私はこの固定には使用してアニメーション化のcssを直接ではなく呼び出し window.scrollTo();
各ステップ:
$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
duration: 600,
easing: 'swing',
step: function(val) {
window.scrollTo(0, val);
}
});
この作品もなくリフレッシュgotchasとしての利用のクロスブラウザのJavaScriptです。
してい http://james.padolsey.com/javascript/fun-with-jquerys-animate/ 詳よくお使いいただくためには、jQueryのアニメーション機能です。
構文が少し間違っているようです...コードに基づいて、800msで100pxをスクロールダウンしようとしていると仮定していますが、そうであれば(scrollTo 1.4.1を使用して):
$.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');
}