oktató videó - tanfolyam

Az oldalon belüli linkek, oldalon belüli tartalomra mutató linkek (anchor) ha nem is minden weboldal szereplői, azért előfordulnak. Egyik tipikus esete az oldal tetejére mutató link, amelyre kattintva rögtön az oldal tetejére kerül a látogató.

Viszont ez megvalósítható szebben is, számos kész megoldás létezik, ez is egy ilyen.

Csak linkelni kell a jQuery után, majd élesíteni:

$('.anchor-scroll').anchorScroll({
scrollSpeed: 2000, // scroll speed
offsetTop: 0            
});

Az .anchor-scroll tetszőleges, az a class, amellyel jelezzük, hogy az adott linkre kattintva animált görgetést szeretnénk.

scrollSpeed: ilyen sebességgel görgeti a tartalomhoz (ezredmásodpercben)

offsetTop: az oldal tetejére rögzített tartalmak kezdőpontja, általában 0

Majd a link, ami persze lehet szöveges, kép, stb.

<a href="#ide" class="anchor-scroll" data-class-to="#ide">ide kattints</a>

Ami fontos az a href, amely az oldalon lévő id-re (azonosítóra) mutat, ahova ugrani kell, valamint a class és a data-class-to, amely szintén az adott azonosító ahova ugrani kell.

És ennyi, így már működik is.

Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!

Hasznos extrák

data-on-scroll: egy class-t ad hozzá görgetés közben, például homályosítható

<a href="#ide" class="anchor-scroll" data-class-to="#ide" data-on-scroll="blur">ide kattints</a>

Ezt a class-t a CSS-ben létre kell hozni, pl.:

.blur {
     /* CSS3 */
    filter: blur(5px);

    /* Firefox */
    -moz-filter: blur(5px);

    /* Webkit */
    -webkit-filter: blur(5px);

    /* Opera */
    -o-filter: blur(5px);

}

data-scroll-end: egy class-t ad hozzá görgetés végén

Javascript kód végrehajtása

onScroll: a görgetés kezdetekor
scrollEnd: a görgetés végén

$('.anchor-scroll').anchorScroll({

scrollSpeed: 800, // scroll speed
offsetTop: 0, // offset for fixed top bars (defaults to 0)
   
onScroll: function () {
     
    },

    scrollEnd: function () {
     
    }

 });