Płynne przewijanie do określonego fragmentu strony w jQuery

Data publikacji: 2013-06-28 | Tagi:

Czasami zamiast linkowania do kolejnych podstron wystarczy proste przeniesienie do danego id w obrębie bieżącej strony.

Sposób w czystym htmlu jest stosunkowo prosty:

<a href="#docelowy_id">link</a>

Jednak niezbyt efektowny - zawartość strony "przeskakuje" do danego id.

Można to nieco urozmaicić używając jQuery.

Do kodu strony należy dołączyć funkcję:

function scroll_to(selector) {
    $('html,body').animate({scrollTop: $(selector).offset().top}, 1000);
    return false;
} 

Następnie należy zmodyfikować link:

<a href="javascript:void();" onclick="scroll_to('#docelowy_id');">link</a>

Po kliknięciu w taki link, strona zostanie płynnie przewinięta (w czasie 1000ms) do danego selektora. Dodam tylko, że selektorem może być dowolny prawidłowy selektor jQuery (klasa, id, nazwa, tag itp.).


Oceń ten post:
Podziel się:

comments powered by Disqus

IT w obrazkach: