jQuery .scrollTop (); + animasi

171

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!

Juan Di Diego
sumber
1
perlu bahwa tombol-tombol di mana Anda memecat acara selalu terlihat? Jika tidak maka saya memiliki kode yang tidak memerlukan kondisi apa pun yang dapat memudahkan kondisi pertama Anda
The Mechanic
1
Seharusnya tidak ada kutipan di sekitar milidetik. "String" yang
diacu

Jawaban:

314

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.

TLS
sumber
1
Terima kasih Thomas, itulah yang saya butuhkan. Saya juga menambahkan penundaan karena kelas ditambahkan dengan cepat. if (top! = 0) {console.log ("gulir tersembunyi"); body.animate ({scrollTop: 0}, '500', 'swing', function () {console.log ("Finished animating"); leftitems.delay (1000) .removeClass ("slide");}); }
Juan Di Diego
5
Saya tidak yakin apakah itu karena posting ini berumur 4 tahun, tetapi saya pikir dalam versi terbaru dari jQuery Anda perlu menghapus tanda kutip tunggal di sekitar waktu: body.animate ({scrollTop: 0}, 500, 'swing', function () {alert ("Finished animating");});
Andrew
27
Omong-omong, callback Anda akan dieksekusi dua kali, karena Anda memilih dua elemen.
Big McLargeHuge
8
Thomas punya titik bagus untuk menambahkan tubuh dan html. Kasus 1. Badan baca Chrome dan mendaftar, FIrefox perlu html untuk melakukannya.
fearis
4
Baru saja mencoba - $ ('html') tidak berfungsi di Chrome dan $ ('body') tidak berfungsi di Firefox, jadi $ ('html, body') diperlukan. Dan juga memanggil .stop () adalah hal yang baik - saya mencoba menelepon menghidupkan beberapa kali dengan cepat di chrome dan setelah itu saya tidak dapat menggulir ke bawah halaman.
Imamat Lukomsky
54

Coba kode ini:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
Shailesh
sumber
8
$("html")harus digunakan sebagai gantinya, karena dalam kasus Anda jika Anda menambahkan fungsi panggilan balik itu akan dipanggil dua kali, sekali untuk html dan sekali untuk tubuh . Dan menggunakan tubuh tidak melakukan apa-apa.
flawyte
10
sepertinya itu tergantung pada browser. dalam beberapa kasus, $ ('html') mungkin tidak melakukan apa-apa, jadi Anda perlu menggunakan keduanya, dan menangani panggilan balik yang dipicu dua kali.
commonpike
31

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

});
Berbunyi
sumber
8

untuk ini, Anda dapat menggunakan metode panggilan balik

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

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');
      });
}
Kishan Patel
sumber
5

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;
    });
}
T.Todua
sumber
' timelength ' sudah dimasukkan sebagai parameter sehingga tidak perlu mendeklarasikannya dengan 'var'. 'Edit' jawaban ini tidak dimungkinkan, karena kurang dari 6 karakter! ;-) +1
Anthony Walsh
@AnthonyWalsh tidak mungkin afaik. vardiperlukan untuk tidak menimpa yang global (jika ada variabel global dengan nama itu)
T.Todua
Cukup adil ;-) Saya menggunakan TypeScript dan mengirimkan angka secara langsung sebagai parameter untuk timelength jadi semua ruang lingkup lokal dalam kasus saya. Bersulang!
Anthony Walsh
4

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

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

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;});});
Remal Mahmud
sumber
0
$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);
Amanverma Lucky
sumber
0

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