Vissza a lap tetejére gomb létrehozása CSS és jQuery segítségével

A vissza a tetejére gomb az a dolog, amit sokan, valószínűleg sok webhelyen már láttak. Ez az a nyíl, amely a weboldal jobb alsó sarkában jelenik meg, amikor görgetni kezdesz. Ha rákattintasz, visszakerülsz az oldal tetejére.

Ha weboldalt tervezel és szeretnél hozzáadni egy vissza a tetejére gombot, vagy csak kíváncsi vagy arra, hogyan építhetsz ki egyet, üdvözlünk a fedélzeten!

Ha magyar nyelvről angolra szeretnél váltani, kattints bátran ide: Creating a Back to Top Button with CSS & jQuery

Vissza a jövőbe tetejére

A kód két részből áll: a CSS stílusból és egy kis jQuery szkriptből. Kezdjük a CSS-el.

CSS stílus gombhoz

Kezdjük azzal, hogy stílusokat és jelöléseket hozunk létre a gombunkhoz. Itt van a HTML rész:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a id="button"></a>

A gomb csak egy horgonycímkét tartalmazhat egy id gombbal. A FontAwesome könyvtárhoz egy linket is hozzáveszünk, hogy használhassunk egy ikont a gombunkhoz.

A gomb kezdeti stílusai így fognak kinézni:

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

Mivel a gomb egy horgony elem, és a horgonyok alapértelmezés szerint inline elemek, meg kell változtatnunk a megjelenítési tulajdonságot az inline blokkra úgy, hogy hozzá tudjunk rendelni dimenziókat.

Legyen egy négyzet alakú gomb, 50 * 50px, lekerekített 4px sarkokkal. Világos narancssárga színt adunk és mindkét oldalon 30px margót.

A rögzített pozíció mindig lehetővé teszi, hogy a gombunk ugyanazon a helyen maradjon, amikor lapozunk az oldalra, és a nagyon magas számú z-index biztosítja, hogy a gomb mindig átfedjen más weboldal elemekkel.

Amikor egy gomb fölé mutatunk, a kurzor egy mutatóra vált, és a háttér sötétszürke lesz. Annak érdekében, hogy az átmenet zökkenőmentes legyen, 0,3 másodperces átmenetet adunk a háttérszín tulajdonságnak. Továbbá, ha rákattintunk a gombra, a háttérszín is változik, és kicsit világosabbá válik.

Ikon hozzáadása

Jelenleg a mi gombunk üres, ezért adjunk hozzá egy ikont. Ehhez hozzátesszük egy olyan::utána pszeudo-elemet, mint ez :

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

Az ikont a FontAwesome legnépszerűbb betűtípus-könyvtárából választjuk ki. Úgy döntöttem, hogy egy Chevron Up ikonnal megyek.

Ha pszeudo elemként szeretnéd megjeleníteni, állítsd be a betűtípuscsaládot és rendeld hozzá az ikon Unicode értékét a tartalomhoz.

Győződj meg róla, hogy a  vonalmagassága megegyezik az ikon magasságával, ha azt szeretnéd, hogy vízszintesen a középpontja legyen.

Funkcionalitás hozzáadása a jQuery segítségével

Ebben a részlegben megmutatom, hogyan fog a gomb a várt módon működni. Ennek legegyszerűbb módja a JavaScript-könyvtár jQuery használata. Először meg kell adnunk a jQuery-t kódunk HTML-jelöléséhez. Add hozzá ezt a kódsorozatot, mielőtt bezárnád a testcímkét.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

Most a szkriptet a jQuery szintaxis segítségével írhatjuk. Add hozzá a következő szkriptet a jQuery sor után:

<script>

jQuery(document).ready(function() {
  
  var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

});

</script>

Vessünk egy közelebbi pillantást a szkriptre.

Látni fogod a kód első sorát:

jQuery(document).ready(function() {

Alapvetően azt mondja, hogy csak akkor futtasd a kódot ebben a funkcióban, ha a dokumentum teljesen be van töltve. Ez nagyszerű módja annak, hogy megakadályozzuk a hibákat abban az esetben, ha JavaScript kódod olyan weblaprészek módosítását akarná, amelyek nincsenek teljesen betöltve a böngészőben.

A dokumentum után futó kód teljesen betöltve két fő kódból áll, ahol mindegyik a maga dolgát végzi.

A parancsfájl első része megjeleníti a gombunkat, és eltűnik, miután az oldal gördülése elér egy bizonyos pontot. A második rész az oldalt felülre görgeti, miután rákattintunk a gombra. Vizsgáljuk meg ezeket részletesen.

A gomb megjelenése és eltűnése

Ezt a kódot kell használni:

 var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

Először egy btn változót deklarálunk, és a gomb egy ID-vel rendelkező elemére mutatjuk, hogy könnyebben megérthessük később a kódot. Ez segít a JavaScriptnek a számítás gyorsabb elvégzéséhez. Miután az elemet egy változóba tároljuk, a JavaScriptnek nem kell többször átkutatnia az egész oldalt, amikor újra kell használni a kódot.

.scroll()

A jQuery-nek van egy praktikus funkciója .scroll (). Megköt egy kódrészt,  amelyet minden egyes alkalommal végre kell hajtani, amikor a weboldalon egy görgetési esemény történik. Alkalmazható bármelyik görgethető elemhez, mint pl. a keretekhez, de általában az ablakelemre alkalmazzuk, mivel a legtöbb esetben a görgetés itt történik, beleértve a példát is.

$(window).scroll(function() {

A függvényen belül ezt az if / else utasítást tesszük:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Itt megpróbáljuk ellenőrizni a gördítősáv függőleges helyzetét, és megjeleníteni a gombunkat, ha egy bizonyos pont alatt van, és eltűnik, ha az a fenti pont fölött van.

A görgetősáv aktuális pozíciójának eléréséhez beépített jQuery módszert használunk .scrollTop (). Egyszerűen visszatér több olyan képponthoz, amely a gördíthető terület felett van elrejtve.

Tehát minden alkalommal, amikor görgetünk, a JavaScript ellenőrzi, hogy hány pixel rejtőzik, és összehasonlítja őket egy számmal. Esetünkben ezt a számot 300-ra állítottam, de megváltoztathatod, ha akarod.

Ha átlépjük a 300px-t, hozzáadunk egy bemutató osztályt a gombelemhez, ami megjeleníti. Ha a szám kevesebb, mint 300, eltávolítjuk az adott osztályt. Az osztályok hozzáadása és eltávolítása egy másik oka annak, hogy a jQuery annyira népszerű. Ezt két egyszerű módszerrel tehetjük meg: addClass () és removeClass ().

Azonban a CSS-ben még nincs bemutató osztályunk, ezért add hozzá:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Alapértelmezés szerint a mi gombunk rejtve lesz, ezért még néhány szabályt kell hozzáadnunk a #button elemhez:

#button {
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}

Az átmenet megkönnyítése érdekében hozzáadtam még két értéket az átmeneti attribútumhoz, az átlátszóság és a láthatóság 0,5 másodpercre van állítva.

Görgetés a tetejére

A szkript második része lehetővé teszi, hogy a gomb megnyomása után az oldal tetejére görgess.

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

Az első jQuery módszer itt látható on(). Első paramétere a "click" JavaScript esemény, amely minden egyes alkalommal feltűnik, amikor egérkattintást hajtunk végre a böngészőnkben. A második paraméter egy kezelő funkció, amely az esemény bekövetkezte után azonnal aktiválódik.

A kezelő funkció egy eseményparamétert használ. Megnevezhetjük, amit akarunk, de általában az e vagy az event ajánlott. Az eseményparamétert meg kell adnunk annak érdekében, hogy a preventDefault () metódussal átadjuk a függvénynek és használjuk.

Az e.preventDefault () eljárás megakadályozza, hogy az esemény alapértelmezett művelete megtörténjen, például egy hivatkozás nem vezet minket a következő oldalra. A mi esetünkben ez nem döntő jelentőségű, hiszen a horgonyelemünkben nincs href attribútum, és egyébként sem vezetne el egy új oldalra, de mindig jobb a kettős ellenőrzés.

.animate()

A jQuery. Anima () metódus az, amelyik az egész trükköt végzi.

    $('html, body').animate({scrollTop:0}, '300');

Az .animate () módszer első paramétere a tulajdonságok listája, amelyet animálni kell. Tulajdonságunk neve scrollTop, és azt szeretnénk, hogy az értéke legyen 0. A paraméter típusa sima objektum, ezért használjuk a göndör zárójeleket, és írjuk le az értékeket a kulcs / érték páros szintaxissal.

A második paraméter a sebesség, amellyel animációnkat szeretnénk futtatni. Ezt milliszekundumban mérik, és minél magasabb a szám, annál lassabb az animáció. Az alapértelmezett 400, de 300-ra változtattam.

Végül alkalmazzuk az animált módszert a HTML és a testelemekre weboldalunkon.

Most minden alkalommal, amikor rákattintunk a gombra, az az oldal tetejére vezet.

Demó

Láthatjuk a végeredményt ebben a CodePen demóban. Demonstrációs célból hozzáadtam néhány minta szöveget.

Tekintsd meg a Vissza a tetejére gombot Matthew Caintől (@matthewcain) a CodePenen.

Záró gondolatok

A vissza a tetejére gombok nagyszerű használhatósági elemei egy weboldalnak, s noha apró, de hasznos részletet ad hozzá a webes forráshoz. Remélhetőleg ez az útmutató segített kiszélesíteni a CSS- és JavaScript-ismereteidet, és olyan "a-ha" pillanatokat biztosít, amelyek hasznosak lehetnek a webes tervezők és fejlesztők számára.

További jó hackelést!