jQuery .scrollTop(); + hoạt hình

Question

Tôi đặt trang để cuộn lên trên cùng khi một nút được nhấp. Nhưng trước tiên, tôi đã sử dụng câu lệnh if để xem đầu trang có được đặt thành 0. Sau đó, nếu không phải 0 Tôi tạo hiệu ứng cho trang để cuộn lên trên cùng.

var body = $("body"); 
var top = body.scrollTop() // Get position of the body 

if(top!=0) 
{ 
    body.animate({scrollTop:0}, '500'); 
} 

Phần khó khăn hiện đang hoạt ảnh gì đó SAU KHI trang đã cuộn lên trên cùng. Vì vậy, suy nghĩ tiếp theo của tôi là, tìm hiểu vị trí trang là gì. Vì vậy, tôi sử dụng giao diện điều khiển đăng nhập để tìm hiểu.

console.log(top); // the result was 365 

này đã cho tôi một kết quả của 365, tôi đoán đó là số vị trí tôi đang ở ngay trước khi di chuyển lên trên cùng.

Câu hỏi của tôi là làm cách nào để đặt vị trí là 0, để tôi có thể thêm một hoạt ảnh khác chạy khi trang ở 0?

Cảm ơn!

Answer 1

Để thực hiện việc này, bạn có thể đặt chức năng gọi lại cho lệnh animate sẽ thực thi sau khi hoạt ảnh cuộn đã hoàn tất.

Ví dụ:

var body = $("html, body"); 
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
    alert("Finished animating"); 
}); 

đâu rằng mã cảnh báo là, bạn có thể thực hiện nhiều javascript để thêm vào trong phim hoạt hình hơn nữa.

Ngoài ra, 'xoay' nằm ở đó để đặt độ nới lỏng. Hãy xem http://api.jquery.com/animate/ để biết thêm thông tin.

Answer 2

cho điều này bạn có thể sử dụng phương pháp gọi lại

body.animate({ 
     scrollTop:0 
    }, 500, 
    function(){} // callback method use this space how you like 
); 

Answer 3

Hãy thử điều này thay vì:

var body = $("body, html"); 
var top = body.scrollTop() // Get position of the body 
if(top!=0) 
{ 
     body.animate({scrollTop :0}, 500,function(){ 
     //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED 
      alert('Hello'); 
     }); 
} 

Answer 4

Hãy thử mã này:

$('.Classname').click(function(){ 
     $("html, body").animate({ scrollTop: 0 }, 600); 
     return false; 
}); 

Answer 5

Sử dụng này:

$('a[href^="#"]').on('click', function(event) { 

    var target = $($(this).attr('href')); 

    if(target.length) { 
     event.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 500); 
    } 

}); 

Answer 6

Mã với chức năng nhấp chuột()

var body = $('html, body'); 

    $('.toTop').click(function(e){ 
     e.preventDefault(); 
     body.animate({scrollTop:0}, 500, 'swing'); 

}); 

.toTop = lớp của nguyên tố nhấp lẽ img hoặc a

Answer 7

jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
     alert("Finished animating"); 
    }); 

Answer 8

Giải pháp đơn giản:

di chuyển đến bất kỳ yếu tố theo ID hoặc TÊN:

SmoothScrollTo("elementId", 1000); 

code:

function SmoothScrollTo(id_or_Name, timelength){ 
    var timelength = timelength || 1000; 
    $('html, body').animate({ 
     scrollTop: $("#"+id_or_Name).offset().top-70 
    }, timelength, function(){ 
     window.location.hash = id_or_Name; 
    }); 
}