Tôi đặt trang để cuộn lên trên cùng khi nhấp vào nút. Nhưng trước tiên, tôi đã sử dụng một câu lệnh if để xem nếu đầu trang không được đặt thành 0. Sau đó, nếu không phải là 0, tôi làm động 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 bây giờ là hoạt hình một cái gì đó SAU 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 bảng điều khiển để tìm hiểu.

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

Điều này mang lại cho tôi kết quả 365, tôi đoán đó là số vị trí tôi đã ở ngay trước khi cuộ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í thành 0, để tôi có thể thêm một hình ảnh động khác chạy khi trang ở mức 0?

Cảm ơn!

Để 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 kết thúc.

Ví dụ:

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

Mã cảnh báo đó nằm ở đâu, bạn có thể thực thi nhiều javascript hơn để thêm vào hình ảnh động.

Ngoài ra, 'swing' là có để thiết lập nới lỏng. Hãy xem http://api.jquery.com/animate/ để biết thêm thông tin.

Hãy thử mã này:

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

Dùng cái 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);
    }

});

Đối với điều này, bạn có thể sử dụng phương thức gọi lại

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

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

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');
      });
}

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

cuộn đến bất kỳ yếu tố nào bằng ID hoặc NAME:

SmoothScrollTo("#elementId", 1000);

mã:

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;
    });
}

Mã có chức năng nhấp ()

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

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

}); 

.toTop= lớp phần tử được nhấp có thể imghoặca

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

Bạn phải xem

$(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

hoặc thử chúng

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

$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);

bạn có thể sử dụng cả lớp CSS hoặc id HTML, để giữ cho nó đối xứng Tôi luôn sử dụng lớp CSS chẳng hạn

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">

$(document).ready(function () {
    $('.js--scroll-to-plans').click(function () {
        $('body,html').animate({
            scrollTop: $('.js--section-plans').offset().top
        }, 1000);
        return false;})
});