Bir düğme tıklatıldığında sayfayı en üste kayacak şekilde ayarladım. Ama önce sayfanın üst kısmının 0 olarak ayarlanıp ayarlanmadığını görmek için bir if ifadesi kullandım. Sonra 0 değilse, sayfanın üstüne gitmek için animasyonluyorum.

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

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

Zor kısım şimdi sayfanın üst kısmına kaydırıldıktan SONRA bir şey canlandırıyor. Bir sonraki düşüncem, sayfa konumunun ne olduğunu bulmak. Bu yüzden öğrenmek için konsol günlüğünü kullandım.

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

Bu bana 365'in bir sonucunu verdi, sanırım zirveye geçmeden önce bulunduğum pozisyon numarası.

Benim sorum, konumu 0 olarak nasıl ayarlayabilirim, böylece sayfa 0'a geldiğinde çalışan başka bir animasyon ekleyebilir miyim?

Teşekkürler!

Bunu yapmak için, kaydırma animasyonu bittikten sonra yürütülecek canlandır komutu için bir geri arama işlevi ayarlayabilirsiniz.

Örneğin:

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

Bu uyarı kodunun olduğu yerde, daha fazla animasyona eklemek için daha fazla javascript çalıştırabilirsiniz.

Ayrıca, hareket hızını ayarlamak için 'salıncak' vardır. Check out http://api.jquery.com/animate/ fazla bilgi için.

Bu kodu deneyin:

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

Bunu kullan:

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

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

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

});

bunun için geri çağrı yöntemini kullanabilirsiniz

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

Bunun yerine şunu deneyin:

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

Basit çözüm:

herhangi bir öğeye ID veya NAME ile kaydırma:

SmoothScrollTo("#elementId", 1000);

kod:

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ıklama fonksiyonlu kod ()

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

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

}); 

.toTop= tıklanan öğenin sınıfı belki imgveyaa

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

bunu görmelisin

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

veya dene

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

hem CSS sınıfını hem de HTML kimliğini kullanabilirsiniz, simetrik tutmak için her zaman örneğin CSS sınıfını kullanıyorum

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