Navigáció lapon belül

Írta Tagged with ,

Az alábbi függvény segítségével animált gördülést tudunk alkalmazni lapon belüli navigálás esetén. jQuery UI szükséges hozzá. Animáció típusok: link

$('a.page-scroll').bind('click', function(event) {
  event.preventDefault(); //kattintás figyelmen kívül hagyása
  var el = $(this);
  var correction = 20; //pixel korrekció - a cél elemhez képest ennyivel gördül magasabbra
  var animation_speed = 300; //animáció sebessége (ms)
  var animation_type = 'linear'; //animáció típusa 
  $('html, body').stop().animate({
    scrollTop: ($(el.attr('href')).offset().top - correction)
  }, animation_speed, animation_type);
});

Használata:
1.: fenti kód beillesztése az oldalba
2.: page-scroll class-t kell adni a kattintható linkeknek.

<a class="page-scroll" href="#link1">link</a>

3.: Cél id-k alkalmazása:

<h1 id="link1">Cél</h1>