كيفية تمرير الإطار باستخدام مسج $ .scrollTo () وظيفة

Question

وأنا أحاول أن انتقل لأسفل 100px في كل مرة يحصل المستخدم بالقرب من أعلى المستند.

ولدي وظيفة المنفذة عندما يحصل المستخدم على مقربة من أعلى المستند، ولكن وظيفة .scrollTo لا يعمل.

وأضع تنبيه بعد وقبل أن تحقق لمعرفة ما إذا كان فعلا الخط أم لا الذي وقف عليه وفقط التنبيه الأول تنفجر، وهنا رمز:

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

وأنا أعرف أن لدي صفحة مسج مرتبطة بشكل صحيح لأنني أستخدم العديد من الوظائف الأخرى في جميع أنحاء مسج وكلها تعمل بشكل جيد. لقد حاولت أيضا إزالة "مقصف" من فوق، وأنه لا يبدو أن تحدث فرقا.

Answer 1

إذا كان لا يعمل لماذا لا تحاول استخدام أسلوب scrollTop مسج على ذلك؟

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

إذا كنت تبحث لتمرير بسلاسة هل يمكن استخدام الأساسية جافا سكريبت setTimeout / setInterval وظيفة لجعله انتقل في الزيادات من 1PX على طول معينة من الزمن.

Answer 2

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

Answer 3

ومسج الآن يدعم scrollTop كمتغير الرسوم المتحركة.

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

وأنت لم تعد بحاجة إلى setTimeout / setInterval للتمرير بسلاسة.

Answer 4

لالتفاف على html مقابل قضية body، أنا ثابت ذلك من خلال عدم تحرك المغلق مباشرة بل يدعو window.scrollTo(); على كل خطوة:

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

وهذا يعمل بشكل جيد دون أي gotchas التحديث كما انها تستخدم عبر متصفح جافا سكريبت.

وإلقاء نظرة على http://james.padolsey.com/javascript / متعة مع jquerys-الأرواح / للحصول على مزيد من المعلومات حول ما يمكنك القيام به مع وظيفة الأرواح مسج ل.

Answer 5

ويبدو كما لو كنت قد حصلت على جملة خاطئة قليلا ... أفترض بناء على التعليمات البرمجية التي تحاول انتقل لأسفل 100px في 800ms، إذا كان الأمر كذلك فإن هذا يعمل (باستخدام scrollTo 1.4.1):

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

Answer 6

والواقع شيء من هذا القبيل

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