jQuery hoạt hình cuộn lên trên 0 không hoạt động trên Windows Phone

Question

Tôi đã viết một trang web có chức năng cuộn chế độ xem người dùng lên đầu trang. Các cuộc gọi trong câu hỏi là:

$('html,body').animate({scrollTop:0}, 150, 'swing'); 

này hoạt động tốt trên tất cả các trình duyệt máy tính để bàn, nhưng trên Windows Phone, nó chỉ cuộn người dùng tăng khoảng 180 điểm ảnh, sau đó dừng lại. Tôi đã thử thay thế chức năng bằng:

$('html,body').scrollTop(0); 

Nó bám vào đầu trên máy tính để bàn, nhưng nó cuộn lên đầu trên điện thoại. Tôi tin rằng điều này cần cho Internet Explorer di động để cố gắng làm mượt mà di chuyển, và đang gây ra vấn đề. Nếu đây là trường hợp (hoặc nếu không, ai đó có thể sửa tôi), làm thế nào tôi có thể ghi đè lên chức năng này để có được các hình ảnh động để làm việc?

EDIT

Mặc dù, nó dường như làm việc trong một năng lực hạn chế, tôi đã thay thế mã cuộn không lý tưởng của mình với điều này:

$('html,body').animate({scrollTop:0}, 150, 'swing', function() { 
    $('html,body').scrollTop(0); 
}); 

Nhưng nó sẽ là tốt để biết nếu có một tùy chọn để tắt tính năng cuộn trơn tru trong Mobile IE theo trình tự.

Answer 1

Trên Windows Phone 8, tôi đang chạy vào cùng một vấn đề. Tôi hiện đang làm hack sau đây, nơi nó chờ đợi cho đến khi các hình ảnh động là "hoàn thành" và sau đó thực hiện một window.scrollTo tiêu chuẩn để đảm bảo rằng nó được cuộn đến vị trí thích hợp.

scrollHmtlBody: function (scrollToTarget, duration) { 
    $('html, body').animate({ scrollTop: scrollToTarget }, duration); 

    // Windows Phone doesn't animate properly, 
    // this makes sure it scrolls to the appropriate position (eventually) 
    setTimeout(function() { 
     window.scrollTo(0, scrollToTarget); 
    }, duration + 75); 
} 

Tôi không hài lòng với kết quả - nó hoạt động, nhưng vì chậm trễ 75ms, nó có một chút do dự trước khi "hoàn thành" hoạt ảnh cuộn. Với ít sự chậm trễ, Windows Phone dường như từ chối thực hiện hành động scrollTo (có thể nó cho rằng nó hiện đang "di chuyển"?)

Tôi có thể phải sử dụng mệnh đề if/else với phát hiện thiết bị, nhưng ngay bây giờ Tôi đang cố gắng tìm một giải pháp tốt hơn là đi xuống con đường đó.

Answer 2

tôi giải quyết nó theo cách này

Liên kết: < a href = "# về" data-target = "về" class = "di chuyển đến" > Về </A >

Các neo tên #about làm cho nó hoạt động trên các thiết bị với di chuyển mượt mà

 function scrollToElement(elementId) { 
      var top = $("#" + elementId).offset().top; 
      $('html,body').animate({ scrollTop: top }, 250); 
     } 

     $(".scroll-to").click(function() { 
      scrollToElement($(this).data("target")); 
     }); 

Answer 3

Không ai trong số những giải pháp làm việc cho tôi, hoặc trên Windows Phone 7. gì đã làm công việc là loại bỏ animate() và chỉ dựa vào scrollTop trên thẻ html. Hy vọng điều này sẽ giúp ai đó.

này:

$('html').scrollTop(distance); 

thay vì:

$('html,body').animate({ scrollTop: distance }, 250); 

Answer 4

Tôi đã gặp vấn đề tương tự trên Windows Phone 8. Trong trường hợp của tôi, tôi cần cuộn cửa sổ xuống dưới nhưng trên điện thoại nó sẽ không hoạt động.

Cuối cùng, tôi đã sử dụng kết hợp các giải pháp @topherg và @LocalPCGuy với một biến thể nhỏ để đưa màn hình xuống dưới cùng.

Dưới đây là mã của tôi trong trường hợp nó sẽ giúp người khác:

$("html, body").stop().animate({ 
    scrollTop: $("#last-message").offset().top 
}, 2000, 'swing', function() { 
    $("html, body").scrollTop($("#last-message").offset().top); 
}); 

setTimeout(function() { 
    window.scrollTo(0, document.body.scrollHeight); 
}, 2075); 

đâu # cuối cùng thông điệp là div Tôi muốn di chuyển đến. Nó cảm thấy một chút hacky, nhưng cũng như vậy Windows Phone: P