วิธีเลื่อนหน้าต่างโดยใช้ฟังก์ชัน JQuery $ .scrollTo ()

ฉันพยายามเลื่อนลง 100px ทุกครั้งที่ผู้ใช้เข้าใกล้ด้านบนสุดของเอกสาร

ฉันมีฟังก์ชันที่ทำงานเมื่อผู้ใช้เข้าใกล้ด้านบนสุดของเอกสาร แต่ฟังก์ชัน. scrollTo ไม่ทำงาน

ฉันแจ้งเตือนก่อนและหลังเพื่อตรวจสอบว่าเป็นบรรทัดจริงหรือไม่ที่หยุดการแจ้งเตือนและมีเพียงการแจ้งเตือนครั้งแรกเท่านั้นที่ดับลงนี่คือรหัส:

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

ฉันรู้ว่าฉันมีหน้า jquery ที่เชื่อมโยงอย่างถูกต้องเพราะฉันใช้ฟังก์ชั่น jquery อื่น ๆ มากมายและมันก็ทำงานได้ดี ฉันได้ลองลบ 'px' จากด้านบนแล้วและดูเหมือนจะไม่สร้างความแตกต่าง

ถ้ามันไม่ได้ผลทำไมคุณไม่ลองใช้วิธี scrollTop ของ jQuery?

$("#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 เพื่อเลื่อนอย่างราบรื่นอีกต่อไป

ที่จะได้รับรอบ htmlbodyปัญหาvs ฉันแก้ไขสิ่งนี้โดยการไม่ทำให้ css เคลื่อนไหวโดยตรง แต่เป็นการเรียกร้องwindow.scrollTo();ในแต่ละขั้นตอน:

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

ใช้งานได้ดีโดยไม่ต้องมีการรีเฟรชใด ๆ เนื่องจากใช้ JavaScript ข้ามเบราว์เซอร์

ไปที่http://james.padolsey.com/javascript/fun-with-jquerys-animate/สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่คุณสามารถทำได้ด้วยฟังก์ชัน animate ของ jQuery

ดูเหมือนว่าคุณมีไวยากรณ์ผิดเล็กน้อย ... ฉันคิดตามรหัสของคุณว่าคุณกำลังพยายามเลื่อนลง 100px ใน 800ms ถ้าเป็นเช่นนั้นก็ใช้ได้ (โดยใช้ 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');
}