Płynne przejście do zakładki

[matisowa]

Otóż na paru stronach widziałem efekt płynnego przejścia do id. Naciskałem przycisk i powoli przechodziło do zakładki, a nie, tak normalnie - od razu :)

Pomoże ktos?

 

E: Jeśli ktoś nie wie o co chodzi --- na niektórych stronach są przyciski "wróć na górę strony". Chodzi o wolne płynne przejście :)

[gnysek]

Jeśli nie chcesz pisać od zera, użyj jQuery. Cofanie na górę strony to bodaj $.scrollTo, a płynne przejście to $.fadeIn / $.fadeOut - po przykłady odsyłam do dokumentacji. Ewentualnych innych rozwiązań w sieci pełno.

[matisowa]

hmm, ten scrolltop nie działa :( popuł się chyba, patrzyłem w dokumentacji, w examples i nie działało na dwóch przeglądarkach

[Konrad-GM]

jQuery(element).scrollTop można animować poprzez

jQuery(document.body).animate({scrollTop:100})

[matisowa]

no ok ale jednego nie rozumiem, bo na tej stronie w dokumentacji jest demo, pisze Hello i scrollTop: 0, mimo poruszania strony, bo jak rozumiem, to chyba chodzi o ilosc pixeli które są niewidoczne od góry :) Ło co chodzi?

 

E: Up: No tak, ale to jest animacja do pixela 100, a da się do zakładki? (bo czasami przeglądarki różnie interpretują stronę przez co niektóre elementy są mniejsze/większe, więc pozycja pixela się zmienia.

[Czarny Ass]

Tylko ja takie staroświeckie sposoby stosuję jak HTML + CSS z małymi wstawkami JS? :D

[szmalu]

nie, ja też dalej tak strony robię staromodnie :<

 

technologie to ja nie

[Konrad-GM]

no ok ale jednego nie rozumiem, bo na tej stronie w dokumentacji jest demo, pisze Hello i scrollTop: 0, mimo poruszania strony, bo jak rozumiem, to chyba chodzi o ilosc pixeli które są niewidoczne od góry :) Ło co chodzi?

 

E: Up: No tak, ale to jest animacja do pixela 100, a da się do zakładki? (bo czasami przeglądarki różnie interpretują stronę przez co niektóre elementy są mniejsze/większe, więc pozycja pixela się zmienia.

Zdobądź pozycję elementu zakładki.

 

$(document).on('ready', function(){
    $('a.zakladka').on('click',function(e){
        e.preventDefault();
        var offset = $(this).offset();
        $(document.body).animate({scrollTop:offset.top})
    });
});