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

Question

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

Tôi có chức năng thực thi khi người dùng ở 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ếu nó thực sự là dòng hay không được ngăn chặn nó và chỉ có cảnh báo đầu tiên đi tắt, đây là các mã:

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

jQuery hiện hỗ trợ scrollTop dưới dạng biến hoạt ảnh.

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

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

Answer 4

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

Answer 5

Thực ra cái gì đó như

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

sẽ làm việc độc đáo và hỗ trợ đệm. Bạn cũng có thể hỗ trợ lợi nhuận dễ dàng - hoàn thành xem dưới đây

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

Answer 6

Để có được xung quanh html vs body vấn đề, tôi cố định này bằng cách không hoạt cảnh css trực tiếp nhưng thay vì gọi window.scrollTo(); trên mỗi 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 độc đáo mà không có bất kỳ gotchas làm mới vì nó sử dụng JavaScript trình duyệt chéo.

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.