Saya mengatur halaman untuk menggulir ke atas ketika tombol diklik. Tapi pertama-tama saya menggunakan pernyataan if untuk melihat apakah bagian atas halaman tidak diatur ke 0. Kemudian jika bukan 0 saya menghidupkan halaman untuk menggulir ke atas.

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

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

Bagian yang sulit sekarang adalah menjiwai sesuatu SETELAH halaman telah bergulir ke atas. Jadi pemikiran saya selanjutnya adalah, cari tahu apa posisi halaman itu. Jadi saya menggunakan log konsol untuk mencari tahu.

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

Ini memberi saya hasil 365, saya menduga itu adalah nomor posisi saya sebelum menggulir ke atas.

Pertanyaan saya adalah bagaimana cara mengatur posisi menjadi 0, sehingga saya dapat menambahkan animasi lain yang berjalan setelah halaman berada di 0?

Terima kasih!

Untuk melakukan ini, Anda dapat mengatur fungsi callback untuk perintah animate yang akan dijalankan setelah animasi gulir selesai.

Sebagai contoh:

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

Di mana kode lansiran itu, Anda dapat mengeksekusi lebih banyak javascript untuk menambahkan animasi lebih lanjut.

Juga, 'ayunan' ada di sana untuk mengatur pelonggaran. Lihat http://api.jquery.com/animate/ untuk info lebih lanjut.

Coba kode ini:

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

Gunakan ini:

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

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

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

});

untuk ini, Anda dapat menggunakan metode panggilan balik

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

Coba ini sebagai gantinya:

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

Solusi sederhana:

gulir ke elemen apa pun dengan ID atau NAME:

SmoothScrollTo("#elementId", 1000);

kode:

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

Kode dengan fungsi klik ()

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

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

}); 

.toTop= kelas elemen yang diklik mungkin imgataua

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

kamu harus melihat ini

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

atau coba mereka

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

Anda dapat menggunakan kelas CSS atau id HTML, untuk menjaga agar tetap simetris, saya selalu menggunakan kelas CSS misalnya

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