jQuery .scrollTop (); + animacja

171

Ustawiam przewijanie strony do góry po kliknięciu przycisku. Ale najpierw użyłem instrukcji if, aby sprawdzić, czy góra strony nie jest ustawiona na 0. Następnie, jeśli nie jest to 0, animuję stronę, aby przewijała się do góry.

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

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

Trudną częścią jest teraz animowanie czegoś PO przewinięciu strony do góry. Więc moja następna myśl to dowiedzieć się, jaka jest pozycja strony. Więc użyłem dziennika konsoli, aby się dowiedzieć.

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

Dało mi to wynik 365, zgaduję, że jest to numer pozycji, na której byłem tuż przed przewinięciem do góry.

Moje pytanie brzmi: jak ustawić pozycję na 0, aby móc dodać kolejną animację, która działa, gdy strona jest na 0?

Dzięki!

Juan Di Diego
źródło
1
czy potrzebne jest aby te guziki, na których odpalasz zdarzenie były zawsze widoczne? Jeśli nie, to mam kod, który nie wymaga żadnego warunku, który może być łatwy do wykonania dla twojego pierwszego stanu
Mechanik
1
Nie powinno być cudzysłowów wokół milisekund. „Łańcuch”, do którego odnosi się dokumentacja, to wolno / szybko
mplungjan

Odpowiedzi:

313

Aby to zrobić, możesz ustawić funkcję zwrotną dla polecenia animacji, która zostanie wykonana po zakończeniu animacji przewijania.

Na przykład:

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

Tam, gdzie jest ten kod alertu, możesz wykonać więcej javascript, aby dodać do dalszej animacji.

Również „swing” służy do ustawiania luzowania. Sprawdź http://api.jquery.com/animate/, aby uzyskać więcej informacji.

TLS
źródło
1
Dzięki Thomas, tego potrzebowałem. Dodałem również opóźnienie, ponieważ klasa jest dodawana tak szybko. if (top! = 0) {console.log ("ukryte przewijanie"); body.animate ({scrollTop: 0}, '500', 'swing', function () {console.log ("Zakończono animację"); leftitems.delay (1000) .removeClass ("slide");}); }
Juan Di Diego
5
Nie jestem pewien, czy to dlatego, że ten post ma 4 lata, ale myślę, że w nowszych wersjach jQuery musisz usunąć te pojedyncze cudzysłowy związane z czasem: body.animate ({scrollTop: 0}, 500, 'swing', function () {alert ("Zakończono animację");});
Andrew,
27
Nawiasem mówiąc, Twój callback zostanie wykonany dwukrotnie, ponieważ wybrałeś dwa elementy.
Big McLargeHuge
8
Thomas miał rację, dodając treść i kod HTML. Przypadek 1. Czytanie treści i srollowanie Chrome, do tego potrzebny jest HTML.
strachis
4
Właśnie próbowałem - $ ('html') nie działa w Chrome, a $ ('body') nie działa w Firefoksie, więc potrzebny jest $ ('html, body'). A także wywołanie .stop () jest dobrą rzeczą - kilka razy próbowałem szybko wywołać animate w chrome i po tym nie mogłem przewinąć strony w dół.
Lev Lukomsky
54

Wypróbuj ten kod:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
Shailesh
źródło
8
$("html")należy użyć zamiast tego, ponieważ w twoim przypadku, jeśli dodasz funkcję zwrotną, zostanie ona wywołana dwukrotnie, raz dla html i raz dla body . A używanie ciała nic nie daje.
flawyte
10
wygląda na to, że zależy to od przeglądarki. w niektórych $ ('html') może nic nie zrobić, więc musisz użyć obu i zająć się wywołaniem zwrotnym wywołanym dwukrotnie.
Commonpike
31

Użyj tego:

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

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

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

});
Brzęczyk
źródło
8

do tego możesz użyć metody callback

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);
Mechanik
źródło
7

Spróbuj tego zamiast tego:

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
źródło
5

Proste rozwiązanie:

przewijanie do dowolnego elementu według ID lub NAZWY:

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.Todua
źródło
timelength ” jest już przekazana jako parametr, więc nie ma potrzeby deklarowania jej za pomocą „var”. „Edycja” tej odpowiedzi nie była możliwa, ponieważ zawierała mniej niż 6 znaków! ;-) +1
Anthony Walsh
@AnthonyWalsh no way afaik. varnie trzeba nadpisywać globalnej (jeśli istnieje zmienna globalna o tej nazwie)
T.Todua
W porządku ;-) Używam TypeScript i przekazuję liczbę bezpośrednio jako parametr długości czasu, więc w moim przypadku cały zakres lokalny. Twoje zdrowie!
Anthony Walsh
4

Kod z funkcją kliknięcia ()

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

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

}); 

.toTop= klasa klikniętego elementu może imgluba

Scorby
źródło
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
źródło
0

musisz to zobaczyć

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

lub wypróbuj je

$(function () {$('a').click(function () {
$('body,html').animate({
    scrollTop: 0
}, 600);
return false;});});
Remal Mahmud
źródło
0
$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);
Amanverma Lucky
źródło
0

możesz użyć zarówno klasy CSS, jak i identyfikatora HTML, aby zachować symetrię, na przykład zawsze używam klasy CSS

<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;})
});
Lord
źródło