A vissza a tetej\u00e9re gomb az a dolog, amit sokan, val\u00f3sz\u00edn\u0171leg sok webhelyen m\u00e1r l\u00e1ttak. Ez az a ny\u00edl, amely a weboldal jobb als\u00f3 sark\u00e1ban jelenik meg, amikor g\u00f6rgetni kezdesz. Ha r\u00e1kattintasz, visszaker\u00fclsz az oldal tetej\u00e9re.<\/p>\n
Ha weboldalt tervezel<\/a> \u00e9s szeretn\u00e9l hozz\u00e1adni egy vissza a tetej\u00e9re gombot, vagy csak k\u00edv\u00e1ncsi vagy arra, hogyan \u00e9p\u00edthetsz ki egyet, \u00fcdv\u00f6zl\u00fcnk a fed\u00e9lzeten!<\/p>\n Ha magyar nyelvr\u0151l angolra szeretn\u00e9l v\u00e1ltani, kattints b\u00e1tran ide:\u00a0Creating a Back to Top Button with CSS & jQuery<\/a><\/p>\n A k\u00f3d k\u00e9t r\u00e9szb\u0151l \u00e1ll: a CSS st\u00edlusb\u00f3l \u00e9s egy kis jQuery szkriptb\u0151l. Kezdj\u00fck a CSS-el.<\/p>\n Kezdj\u00fck azzal, hogy st\u00edlusokat \u00e9s jel\u00f6l\u00e9seket hozunk l\u00e9tre a gombunkhoz. Itt van a HTML r\u00e9sz:<\/p>\n A gomb csak egy horgonyc\u00edmk\u00e9t tartalmazhat egy id gombbal. A FontAwesome k\u00f6nyvt\u00e1rhoz egy linket is hozz\u00e1vesz\u00fcnk, hogy haszn\u00e1lhassunk egy ikont a gombunkhoz.<\/p>\n A gomb kezdeti st\u00edlusai \u00edgy fognak kin\u00e9zni:<\/p>\n Mivel a gomb egy horgony elem, \u00e9s a horgonyok alap\u00e9rtelmez\u00e9s szerint inline elemek, meg kell v\u00e1ltoztatnunk a megjelen\u00edt\u00e9si tulajdons\u00e1got az inline blokkra \u00fagy, hogy hozz\u00e1 tudjunk rendelni dimenzi\u00f3kat.<\/p>\n Legyen egy n\u00e9gyzet alak\u00fa gomb, 50 * 50px, lekerek\u00edtett 4px sarkokkal. Vil\u00e1gos narancss\u00e1rga sz\u00ednt adunk \u00e9s mindk\u00e9t oldalon 30px marg\u00f3t.<\/p>\n A r\u00f6gz\u00edtett poz\u00edci\u00f3 mindig lehet\u0151v\u00e9 teszi, hogy a gombunk ugyanazon a helyen maradjon, amikor lapozunk az oldalra, \u00e9s a nagyon magas sz\u00e1m\u00fa z-index biztos\u00edtja, hogy a gomb mindig \u00e1tfedjen m\u00e1s weboldal elemekkel.<\/p>\n Amikor egy gomb f\u00f6l\u00e9 mutatunk, a kurzor egy mutat\u00f3ra v\u00e1lt, \u00e9s a h\u00e1tt\u00e9r s\u00f6t\u00e9tsz\u00fcrke lesz. Annak \u00e9rdek\u00e9ben, hogy az \u00e1tmenet z\u00f6kken\u0151mentes legyen, 0,3 m\u00e1sodperces \u00e1tmenetet adunk a h\u00e1tt\u00e9rsz\u00edn tulajdons\u00e1gnak. Tov\u00e1bb\u00e1, ha r\u00e1kattintunk a gombra, a h\u00e1tt\u00e9rsz\u00edn is v\u00e1ltozik, \u00e9s kicsit vil\u00e1gosabb\u00e1 v\u00e1lik.<\/p>\n Jelenleg a mi gombunk \u00fcres, ez\u00e9rt adjunk hozz\u00e1 egy ikont. Ehhez hozz\u00e1tessz\u00fck egy olyan Az ikont a FontAwesome<\/a> legn\u00e9pszer\u0171bb bet\u0171t\u00edpus-k\u00f6nyvt\u00e1r\u00e1b\u00f3l v\u00e1lasztjuk ki. \u00dagy d\u00f6nt\u00f6ttem, hogy egy Chevron Up<\/a> ikonnal megyek.<\/p>\n Ha pszeudo elemk\u00e9nt szeretn\u00e9d megjelen\u00edteni, \u00e1ll\u00edtsd be a bet\u0171t\u00edpuscsal\u00e1dot \u00e9s rendeld hozz\u00e1 az ikon Unicode \u00e9rt\u00e9k\u00e9t a tartalomhoz.<\/p>\n Gy\u0151z\u0151dj meg r\u00f3la, hogy a\u00a0 vonalmagass\u00e1ga megegyezik az ikon magass\u00e1g\u00e1val, ha azt szeretn\u00e9d, hogy v\u00edzszintesen a k\u00f6z\u00e9ppontja legyen.<\/p>\n Ebben a r\u00e9szlegben megmutatom, hogyan fog a gomb a v\u00e1rt m\u00f3don m\u0171k\u00f6dni. Ennek legegyszer\u0171bb m\u00f3dja a JavaScript-k\u00f6nyvt\u00e1r jQuery haszn\u00e1lata. El\u0151sz\u00f6r meg kell adnunk\u00a0a jQuery-t k\u00f3dunk HTML-jel\u00f6l\u00e9s\u00e9hez. Add hozz\u00e1 ezt a k\u00f3dsorozatot, miel\u0151tt bez\u00e1rn\u00e1d a testc\u00edmk\u00e9t.<\/p>\n Most a szkriptet a jQuery szintaxis seg\u00edts\u00e9g\u00e9vel \u00edrhatjuk. Add hozz\u00e1 a k\u00f6vetkez\u0151 szkriptet a jQuery sor ut\u00e1n:<\/p>\n Vess\u00fcnk egy k\u00f6zelebbi pillant\u00e1st a szkriptre.<\/p>\n L\u00e1tni fogod a k\u00f3d els\u0151 sor\u00e1t:<\/p>\n Alapvet\u0151en azt mondja, hogy csak akkor futtasd a k\u00f3dot ebben a funkci\u00f3ban, ha a dokumentum teljesen be van t\u00f6ltve. Ez nagyszer\u0171 m\u00f3dja annak, hogy megakad\u00e1lyozzuk a hib\u00e1kat abban az esetben, ha JavaScript k\u00f3dod olyan weblapr\u00e9szek m\u00f3dos\u00edt\u00e1s\u00e1t akarn\u00e1, amelyek nincsenek teljesen bet\u00f6ltve a b\u00f6ng\u00e9sz\u0151ben.<\/p>\n A dokumentum ut\u00e1n fut\u00f3 k\u00f3d teljesen bet\u00f6ltve k\u00e9t f\u0151 k\u00f3db\u00f3l \u00e1ll, ahol mindegyik a maga dolg\u00e1t v\u00e9gzi.<\/p>\n A parancsf\u00e1jl els\u0151 r\u00e9sze megjelen\u00edti a gombunkat, \u00e9s elt\u0171nik, miut\u00e1n az oldal g\u00f6rd\u00fcl\u00e9se el\u00e9r egy bizonyos pontot. A m\u00e1sodik r\u00e9sz az oldalt fel\u00fclre g\u00f6rgeti, miut\u00e1n r\u00e1kattintunk a gombra. Vizsg\u00e1ljuk meg ezeket r\u00e9szletesen.<\/p>\n Ezt a k\u00f3dot kell haszn\u00e1lni:<\/p>\n El\u0151sz\u00f6r egy btn v\u00e1ltoz\u00f3t deklar\u00e1lunk, \u00e9s a gomb egy ID-vel rendelkez\u0151 elem\u00e9re mutatjuk, hogy k\u00f6nnyebben meg\u00e9rthess\u00fck k\u00e9s\u0151bb a k\u00f3dot. Ez seg\u00edt a JavaScriptnek a sz\u00e1m\u00edt\u00e1s gyorsabb elv\u00e9gz\u00e9s\u00e9hez. Miut\u00e1n az elemet egy v\u00e1ltoz\u00f3ba t\u00e1roljuk, a JavaScriptnek nem kell t\u00f6bbsz\u00f6r \u00e1tkutatnia az eg\u00e9sz oldalt, amikor \u00fajra kell haszn\u00e1lni a k\u00f3dot.<\/p>\n .scroll()<\/a><\/strong><\/em><\/p>\n A jQuery-nek van egy praktikus funkci\u00f3ja .scroll (). Megk\u00f6t egy k\u00f3dr\u00e9szt,\u00a0 amelyet minden egyes alkalommal v\u00e9gre kell hajtani, amikor a weboldalon egy g\u00f6rget\u00e9si esem\u00e9ny t\u00f6rt\u00e9nik. Alkalmazhat\u00f3 b\u00e1rmelyik g\u00f6rgethet\u0151 elemhez, mint pl. a keretekhez, de \u00e1ltal\u00e1ban az ablakelemre alkalmazzuk, mivel a legt\u00f6bb esetben a g\u00f6rget\u00e9s itt t\u00f6rt\u00e9nik, bele\u00e9rtve a p\u00e9ld\u00e1t is.<\/p>\n A f\u00fcggv\u00e9nyen bel\u00fcl ezt az if \/ else utas\u00edt\u00e1st tessz\u00fck:<\/p>\n Itt megpr\u00f3b\u00e1ljuk ellen\u0151rizni a g\u00f6rd\u00edt\u0151s\u00e1v f\u00fcgg\u0151leges helyzet\u00e9t, \u00e9s megjelen\u00edteni a gombunkat, ha egy bizonyos pont alatt van, \u00e9s elt\u0171nik, ha az a fenti pont f\u00f6l\u00f6tt van.<\/p>\n A g\u00f6rget\u0151s\u00e1v aktu\u00e1lis poz\u00edci\u00f3j\u00e1nak el\u00e9r\u00e9s\u00e9hez be\u00e9p\u00edtett jQuery m\u00f3dszert haszn\u00e1lunk .scrollTop ()<\/a>. Egyszer\u0171en visszat\u00e9r t\u00f6bb olyan k\u00e9pponthoz, amely a g\u00f6rd\u00edthet\u0151 ter\u00fclet felett van elrejtve.<\/p>\n Teh\u00e1t minden alkalommal, amikor g\u00f6rget\u00fcnk, a JavaScript ellen\u0151rzi, hogy h\u00e1ny pixel rejt\u0151zik, \u00e9s \u00f6sszehasonl\u00edtja \u0151ket egy sz\u00e1mmal. Eset\u00fcnkben ezt a sz\u00e1mot 300-ra \u00e1ll\u00edtottam, de megv\u00e1ltoztathatod, ha akarod.<\/p>\n Ha \u00e1tl\u00e9pj\u00fck a 300px-t, hozz\u00e1adunk egy bemutat\u00f3 oszt\u00e1lyt a gombelemhez, ami megjelen\u00edti. Ha a sz\u00e1m kevesebb, mint 300, elt\u00e1vol\u00edtjuk az adott oszt\u00e1lyt. Az oszt\u00e1lyok hozz\u00e1ad\u00e1sa \u00e9s elt\u00e1vol\u00edt\u00e1sa egy m\u00e1sik oka annak, hogy a jQuery annyira n\u00e9pszer\u0171. Ezt k\u00e9t egyszer\u0171 m\u00f3dszerrel tehetj\u00fck meg: addClass () \u00e9s removeClass ().<\/p>\n Azonban a CSS-ben m\u00e9g nincs bemutat\u00f3 oszt\u00e1lyunk, ez\u00e9rt add hozz\u00e1:<\/p>\n Alap\u00e9rtelmez\u00e9s szerint a mi gombunk rejtve lesz, ez\u00e9rt m\u00e9g n\u00e9h\u00e1ny szab\u00e1lyt kell hozz\u00e1adnunk a #button elemhez:<\/p>\n Az \u00e1tmenet megk\u00f6nny\u00edt\u00e9se \u00e9rdek\u00e9ben hozz\u00e1adtam m\u00e9g k\u00e9t \u00e9rt\u00e9ket az \u00e1tmeneti attrib\u00fatumhoz, az \u00e1tl\u00e1tsz\u00f3s\u00e1g \u00e9s a l\u00e1that\u00f3s\u00e1g 0,5 m\u00e1sodpercre van \u00e1ll\u00edtva.<\/p>\n A szkript m\u00e1sodik r\u00e9sze lehet\u0151v\u00e9 teszi, hogy a gomb megnyom\u00e1sa ut\u00e1n az oldal tetej\u00e9re g\u00f6rgess.<\/p>\n Az els\u0151 jQuery m\u00f3dszer itt l\u00e1that\u00f3 on()<\/a>. Els\u0151 param\u00e9tere a \"click\" JavaScript esem\u00e9ny, amely minden egyes alkalommal felt\u0171nik, amikor eg\u00e9rkattint\u00e1st hajtunk v\u00e9gre a b\u00f6ng\u00e9sz\u0151nkben. A m\u00e1sodik param\u00e9ter egy kezel\u0151 funkci\u00f3, amely az esem\u00e9ny bek\u00f6vetkezte ut\u00e1n azonnal aktiv\u00e1l\u00f3dik.<\/p>\n A kezel\u0151 funkci\u00f3 egy esem\u00e9nyparam\u00e9tert haszn\u00e1l. Megnevezhetj\u00fck, amit akarunk, de \u00e1ltal\u00e1ban az e vagy az event aj\u00e1nlott. Az esem\u00e9nyparam\u00e9tert meg kell adnunk annak \u00e9rdek\u00e9ben, hogy a preventDefault () met\u00f3dussal \u00e1tadjuk a f\u00fcggv\u00e9nynek \u00e9s haszn\u00e1ljuk.<\/p>\n Az e.preventDefault () elj\u00e1r\u00e1s megakad\u00e1lyozza, hogy az esem\u00e9ny alap\u00e9rtelmezett m\u0171velete megt\u00f6rt\u00e9njen, p\u00e9ld\u00e1ul egy hivatkoz\u00e1s nem vezet minket a k\u00f6vetkez\u0151 oldalra. A mi eset\u00fcnkben ez nem d\u00f6nt\u0151 jelent\u0151s\u00e9g\u0171, hiszen a horgonyelem\u00fcnkben nincs href attrib\u00fatum, \u00e9s egy\u00e9bk\u00e9nt sem vezetne el egy \u00faj oldalra, de mindig jobb a kett\u0151s ellen\u0151rz\u00e9s.<\/p>\n .animate()<\/a><\/em><\/strong><\/p>\n A jQuery. Anima () met\u00f3dus az, amelyik az eg\u00e9sz tr\u00fckk\u00f6t v\u00e9gzi.<\/p>\n Az .animate () m\u00f3dszer els\u0151 param\u00e9tere a tulajdons\u00e1gok list\u00e1ja, amelyet anim\u00e1lni kell. Tulajdons\u00e1gunk neve scrollTop, \u00e9s azt szeretn\u00e9nk, hogy az \u00e9rt\u00e9ke legyen 0. A param\u00e9ter t\u00edpusa sima objektum, ez\u00e9rt haszn\u00e1ljuk a g\u00f6nd\u00f6r z\u00e1r\u00f3jeleket, \u00e9s \u00edrjuk le az \u00e9rt\u00e9keket a kulcs \/ \u00e9rt\u00e9k p\u00e1ros szintaxissal.<\/p>\n A m\u00e1sodik param\u00e9ter a sebess\u00e9g, amellyel anim\u00e1ci\u00f3nkat szeretn\u00e9nk futtatni. Ezt milliszekundumban m\u00e9rik, \u00e9s min\u00e9l magasabb a sz\u00e1m, ann\u00e1l lassabb az anim\u00e1ci\u00f3. Az alap\u00e9rtelmezett 400, de 300-ra v\u00e1ltoztattam.<\/p>\n V\u00e9g\u00fcl alkalmazzuk az anim\u00e1lt m\u00f3dszert a HTML \u00e9s a testelemekre weboldalunkon.<\/p>\n Most minden alkalommal, amikor r\u00e1kattintunk a gombra, az az oldal tetej\u00e9re vezet.<\/p>\n L\u00e1thatjuk a v\u00e9geredm\u00e9nyt ebben a CodePen dem\u00f3<\/a>ban. Demonstr\u00e1ci\u00f3s c\u00e9lb\u00f3l hozz\u00e1adtam n\u00e9h\u00e1ny minta sz\u00f6veget.<\/p>\n Tekintsd meg a Vissza a tetej\u00e9re gombot<\/a> Matthew Caint\u0151l\u00a0(@matthewcain)<\/a> a CodePenen<\/a>.<\/p>\n A vissza a tetej\u00e9re gombok nagyszer\u0171 haszn\u00e1lhat\u00f3s\u00e1gi elemei egy weboldalnak, s noha apr\u00f3, de hasznos r\u00e9szletet ad hozz\u00e1 a webes forr\u00e1shoz. Rem\u00e9lhet\u0151leg ez az \u00fatmutat\u00f3 seg\u00edtett kisz\u00e9les\u00edteni a CSS- \u00e9s JavaScript-ismereteidet, \u00e9s olyan \"a-ha\" pillanatokat biztos\u00edt, amelyek hasznosak lehetnek a webes tervez\u0151k \u00e9s fejleszt\u0151k sz\u00e1m\u00e1ra.<\/p>\n Tov\u00e1bbi j\u00f3 hackel\u00e9st!<\/p>\n","protected":false},"excerpt":{"rendered":" A vissza a tetej\u00e9re gomb az a dolog, amit sokan, val\u00f3sz\u00edn\u0171leg sok webhelyen m\u00e1r l\u00e1ttak. Ez az a ny\u00edl, amely a weboldal jobb als\u00f3 sark\u00e1ban jelenik meg, amikor g\u00f6rgetni kezdesz. Ha r\u00e1kattintasz, visszaker\u00fclsz az oldal tetej\u00e9re. Ha weboldalt tervezel \u00e9s szeretn\u00e9l hozz\u00e1adni egy vissza a tetej\u00e9re gombot, vagy csak k\u00edv\u00e1ncsi vagy arra, hogyan \u00e9p\u00edthetsz ki […]<\/p>\n","protected":false},"author":2098140,"featured_media":3090,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,7,22],"tags":[59,31,102,13],"yoast_head":"\nVissza a
j\u00f6v\u0151be<\/del> tetej\u00e9re<\/h2>\nCSS st\u00edlus gombhoz<\/h3>\n
<link<\/strong> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\">\r\n\r\n<a id<\/span>=\"button\"><\/a>\r\n\r\n<\/span><\/span><\/pre>\n#button {\r\n display<\/strong><\/span>: inline-block<\/span>;\r\n background-color<\/strong><\/span>: #FF9800<\/span>;\r\n width<\/strong><\/span>: 50px<\/strong><\/span>;\r\n height<\/strong><\/span>: 50px<\/strong><\/span>;\r\n text-align<\/strong><\/span>: center<\/span>;\r\n border-radius<\/strong><\/span>: 4px<\/strong><\/span>;\r\n margin<\/strong><\/span>: 30px<\/strong><\/span>;\r\n position<\/strong><\/span>: fixed<\/span>;\r\n bottom<\/strong><\/span>: 30px<\/strong><\/span>;\r\n right<\/strong><\/span>: 30px<\/strong><\/span>;\r\n transition: background-color .3s<\/strong><\/span>;\r\n z-index<\/strong><\/span>: 1000;\r\n}\r\n#button:hover {\r\n cursor<\/strong><\/span>: pointer<\/span>;\r\n background-color<\/strong><\/span>: #333<\/span>;\r\n}\r\n#button:active {\r\n background-color<\/span><\/strong>: #555<\/span>;\r\n}\r\n\r\n<\/pre>\nIkon hozz\u00e1ad\u00e1sa<\/h3>\n
::ut\u00e1na<\/code>\u00a0pszeudo-elemet, mint ez :<\/p>\n#button::after {\r\n content<\/strong><\/span>: \"\\f077\"<\/span>;\r\n font-family<\/strong><\/span>: FontAwesome;\r\n font-weight<\/strong><\/span>: normal<\/span><\/strong>;\r\n font-style<\/strong><\/span>: normal<\/span><\/strong>;\r\n font-size<\/strong><\/span>: 2em<\/strong><\/span>;\r\n line-height<\/strong><\/span>: 50px<\/strong><\/span>;\r\n color<\/strong><\/span>: #fff<\/span>;\r\n}\r\n\r\n<\/pre>\nFunkcionalit\u00e1s hozz\u00e1ad\u00e1sa a jQuery seg\u00edts\u00e9g\u00e9vel<\/h3>\n
<script<\/strong> src=\u201dhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\u201d><\/script<\/strong>>\r\n<\/span><\/pre>\n<script>\r\n\r\njQuery(document<\/strong><\/span>).ready(function<\/strong><\/span>() {\r\n \r\n var<\/span><\/strong> btn = $('#button<\/span>');\r\n\r\n $(window<\/span><\/strong>).scroll(function<\/span><\/strong>() {\r\n if<\/span><\/strong> ($(window<\/strong><\/span>).scrollTop() > 300<\/span>) {\r\n btn.addClass('show');\r\n } else<\/span><\/strong> {\r\n btn.removeClass('show');\r\n }\r\n });\r\n\r\n btn.on('click', function<\/span><\/strong>(e) {\r\n e.preventDefault();\r\n $('html, body').animate({scrollTop:0}, '300');\r\n });\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n<\/pre>\njQuery(document<\/span><\/strong>).ready(function<\/span><\/strong>() {\r\n<\/pre>\nA gomb megjelen\u00e9se \u00e9s elt\u0171n\u00e9se<\/h3>\n
var<\/span><\/strong> btn = $('#button'<\/span>);\r\n\r\n $(window<\/span><\/strong>).scroll(function<\/span><\/strong>() {\r\n if<\/span><\/strong> ($(window<\/span><\/strong>).scrollTop() > 300<\/span>) {\r\n btn.addClass('show');\r\n } else<\/span><\/strong> {\r\n btn.removeClass('show'<\/span>);\r\n }\r\n });\r\n\r\n<\/pre>\n$(window<\/span><\/strong>).scroll(function<\/span><\/strong>() {\r\n<\/pre>\n if<\/span><\/strong> ($(window)<\/span><\/strong>.scrollTop() > 300<\/span>) {\r\n btn.addClass('show');\r\n } else<\/span><\/strong> {\r\n btn.removeClass('show');\r\n }\r\n\r\n<\/pre>\n if<\/span><\/strong> ($(window<\/span><\/strong>).scrollTop() > 300<\/span>) {\r\n btn.addClass('show'<\/span>);\r\n } else<\/span><\/strong> {\r\n btn.removeClass('show'<\/span>);\r\n }\r\n\r\n<\/pre>\n#button {\r\n transition: background-color .3s<\/strong><\/span>, \r\n opacity .5s<\/span>, visibility .5s<\/strong><\/span>;\r\n opacity<\/span><\/strong>: 0;\r\n visibility<\/span><\/strong>: hidden<\/strong><\/span>;\r\n}\r\n\r\n<\/pre>\nG\u00f6rget\u00e9s a tetej\u00e9re<\/h3>\n
btn.on('click'<\/span>, function<\/span><\/strong>(e) {\r\n e.preventDefault();\r\n $('html, body'<\/span>).animate({scrollTop:0<\/span>}, '300'<\/span>);\r\n });\r\n\r\n<\/pre>\n $('html, body'<\/span>).animate({scrollTop:0<\/span>}, '300'<\/span>);\r\n<\/pre>\nDem\u00f3<\/a><\/h2>\n
Z\u00e1r\u00f3 gondolatok<\/h2>\n