Cmlap Hírek, cikkek Smooth scrolling vagyis animált görgetés a weboldal adott pozíciójára

Smooth scrolling vagyis animált görgetés a weboldal adott pozíciójára

Biztos te is szoktál néha hosszú oldalaknál tartalomjegyzéket készíteni, vagy egy több blokkos kezdõoldalon a menübõl nem aloldalra, hanem egy adott blokkra ugrasztani a látogatót.

Ez simán megtehetõ a hagyományos hash tag-el ( pl: #blokk1 ), de ekkor az oldal tényleg oda "ugrik". Ehelyett szépen lassan animálva is gördülhet, ami sokkal látványosabb, nagyobb felhasználói élményt nyújt.
A görgetés animálása legegyszerûbben jQuery használatával oldható meg.

A szkript mûködése a következõ:
  • elõször megkeresünk minden linket, aminek a végén egy hashtag található
  • ezek után minden talált elem onclick eseményéhez hozzárendeljük, hogy animálja az oldal body tagját, a talált elem eltolásának tetejéhez.

Az oldalban a cél id-jének meg kell adni azt amire a hash hivatkozik, és már gördül is gyönyörûen!

A szkript eredeti forrása


A mellékelt script használata:

Az alább is megtalálható bekeretezett scriptet tedd az oldalad végébe a </body> elé valahová:
<script type="text/javascript">
$(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) +']');
                  //console.log(target);
                  if (target.length) {
                    $('html,body').animate({
                      scrollTop: target.offset().top
                    }, 1000);
                    return false;
                  }
                }
              });
            });   
</script>


A hivatkozásaidat lásd el a hash tag-ekkel így például:
<a href="#blokk1">görgess a blokk1-re</a>

Ahova gördüljön, egy tetszõleges tag-et a láss el a hivatkozásban megadott id nevével (esetünkben blokk1):
<div id="blokk1">Valami tartalom</div>


Ilyen egyszerû az egész.

Kattints ide a jQuery Smooth Scrolling Demóhoz


update:
Ha esetleg valami probléma van, akkor inkább a
jQuery(document).ready(function(){
});
-be helyezd a függvényt.


$(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) +']'); //console.log(target); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

Tag : jquery
Ha tetszett vagy hasznosnak talltad, krlek oszd meg!
Author / szerz:
Hozzszlsok
Vlasszon nyelvet!
Keress a tartalomban
Kattintson ide az adatok elkldshez!