Cách cuộn cửa sổ bằng hàm JQuery $ .scrollTo ()

Tôi đang cố gắng cuộn xuống 100px mỗi khi người dùng đến gần đầu tài liệu.

Tôi có hàm đang thực thi khi người dùng đến gần đầu tài liệu, nhưng hàm .scrollTo không hoạt động.

Tôi đã đặt một cảnh báo sau và trước đó để kiểm tra xem nó có thực sự là dòng hay không đang dừng nó và chỉ cảnh báo đầu tiên tắt, đây là mã:

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

Tôi biết tôi đã liên kết trang jquery đúng cách vì tôi đang sử dụng nhiều hàm jquery khác và tất cả chúng đều hoạt động tốt. Tôi cũng đã thử xóa 'px' từ phía trên và nó dường như không tạo ra sự khác biệt.

Nếu nó không hoạt động tại sao bạn không thử sử dụng phương thức scrollTop của jQuery?

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

Nếu bạn đang muốn cuộn trơn tru, bạn có thể sử dụng hàm setTimeout / setInterval của javascript cơ bản để làm cho nó cuộn với gia số 1px trong một khoảng thời gian nhất định.

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

jQuery hiện hỗ trợ scrollTop như một biến hoạt ảnh.

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

Bạn không cần phải setTimeout / setInterval để cuộn trơn tru.

Để giải quyết vấn đề htmlvs body, tôi đã khắc phục sự cố này bằng cách không tạo hoạt ảnh trực tiếp cho css mà thay window.scrollTo();vào đó là gọi từng bước:

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

Điều này hoạt động tốt mà không có bất kỳ lỗi làm mới nào vì nó sử dụng JavaScript trên nhiều trình duyệt.

Hãy xem http://james.padolsey.com/javascript/fun-with-jquerys-animate/ để biết thêm thông tin về những gì bạn có thể làm với chức năng hoạt ảnh của jQuery.

Có vẻ như bạn đã sai cú pháp một chút ... Tôi giả sử dựa trên mã của bạn rằng bạn đang cố cuộn xuống 100px trong 800ms, nếu vậy thì điều này hoạt động (sử dụng scrollTo 1.4.1):

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

Trên thực tế một cái gì đó như

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

sẽ hoạt động tốt và hỗ trợ đệm. Bạn cũng có thể hỗ trợ lợi nhuận một cách dễ dàng - để hoàn thành, hãy xem bên dưới

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