{"id":6594,"date":"2020-05-25T10:39:30","date_gmt":"2020-05-25T10:39:30","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=6594"},"modified":"2020-05-31T18:00:34","modified_gmt":"2020-05-31T18:00:34","slug":"przycisku-powrot-do-gory-w-css-jquery","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/","title":{"rendered":"Tworzenie przycisku &#8220;Powr\u00f3t do g\u00f3ry&#8221; za pomoc\u0105 CSS i jQuery"},"content":{"rendered":"<ul>\n<li><a href=\"#title1\">CSS style d\u0142a przycisku Powr\u00f3t do g\u00f3ry<\/a><\/li>\n<li><a href=\"#title2\">Dodawanie ikony<\/a><\/li>\n<li><a href=\"#title3\">Dodawanie funkcjonalno\u015bci za pomoc\u0105 jQuery<\/a><\/li>\n<li><a href=\"#title4\">Jak zrobi\u0107 aby przycisk Powr\u00f3t do g\u00f3ry pojawia\u0142 si\u0119 i znika\u0142<\/a><\/li>\n<li><a href=\"#title5\">Przewijanie do g\u00f3ry<\/a><\/li>\n<li><a href=\"#title6\">FAQ<\/a><\/li>\n<\/ul>\n<p style=\"text-align: justify\">Przycisk Powr\u00f3t do g\u00f3ry - to jeden z najcz\u017a\u015bciej wykorzystywanych na stronach element\u00f3w. Ta strza\u0142ka pojawia si\u0119 w prawym dolnym rogu strony po rozpocz\u0119ciu przewijania. Po klikni\u0119ciu powoduje powr\u00f3t do pocz\u0105tku strony.<\/p>\n<p style=\"text-align: justify\">Je\u015bli chcia\u0142by\u015b doda\u0107 przycisk Powr\u00f3t do g\u00f3ry podczas <a href=\"https:\/\/www.templatemonster.com\/pl\/\" target=\"_blank\">tworzenia strony<\/a> lub chcia\u0142by\u015b dowiedzie\u0107 si\u0119 jak stworzy\u0107 ten porzycisk samodzielnie - zapraszam do lektury!<\/p>\n<div class=\"spacer\"><\/div>\n<hr>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center\">Powr\u00f3t do&nbsp;<span style=\"text-decoration: line-through\">przysz\u0142o\u015bci<\/span>&nbsp;g\u00f3ry<\/h2>\n<p style=\"text-align: justify\">Nasz kod b\u0119dzie sk\u0142ada\u0142 si\u0119 z dw\u00f3ch cz\u0119\u015bci, stylu CSS i ma\u0142ego skryptu jQuery. Zacznijmy od CSS.<\/p>\n<div class=\"spacer\"><\/div>\n<hr>\n<div class=\"spacer\"><\/div>\n<h2 id=\"title1\" style=\"text-align: center\">CSS&nbsp;style d\u0142a przycisku Powr\u00f3t do g\u00f3ry<\/h2>\n<p style=\"text-align: justify\">Zaczynamy od tworzenia styl\u00f3w i znacznik\u00f3w dla naszego przycisku.&nbsp;Tak wygl\u0105da cz\u0119\u015b\u0107 HTML:<\/p>\n<pre style=\"background: #fff;color: #000\"><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">link<\/span> <span style=\"font-style: italic\">rel<\/span>=<span style=\"color: #036a07\">\"stylesheet\"<\/span> <span style=\"font-style: italic\">href<\/span>=<span style=\"color: #036a07\">\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\"<\/span>&gt;<\/span>\n\n<span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">a<\/span> <span style=\"font-style: italic\">id<\/span>=<span style=\"color: #036a07\">\"button\"<\/span>&gt;&lt;\/<span style=\"font-weight: bold\">a<\/span>&gt;<\/span>\n\n<\/pre>\n<p style=\"text-align: justify\">Przycisk b\u0119dzie sk\u0142ada\u0142 si\u0119 tylko z jednej kotwicy z identyfikatorem&nbsp;<code>button<\/code>. Zamieszczamy r\u00f3wnie\u017c link do biblioteki FontAwesome, aby\u015bmy mogli u\u017cy\u0107 ikony dla naszego przycisku.<\/p>\n<p style=\"text-align: justify\">Pocz\u0105tkowe style przycisku b\u0119d\u0105 wygl\u0105dali tak:<\/p>\n<pre style=\"background: #fff;color: #000\"><span style=\"font-style: italic\">#button<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">display<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #06960e;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">inline-block<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">background-color<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #c5060b;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">#FF9800<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">width<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">50<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">px<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">height<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">50<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">px<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">text-align<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #06960e;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">center<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">border-radius<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">4<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">px<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">margin<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">30<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">px<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">position<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #06960e;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">fixed<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">bottom<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">30<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">px<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">right<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">30<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">px<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  transition: background-color <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">.3<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">s<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">z-index<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">1000<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-4412d59d\">;<span class=\"sumo_twilighter_shares\">1<\/span><\/span>\n}\n<span style=\"font-style: italic\">#button<\/span><span style=\"font-style: italic\">:hover<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">cursor<\/span>: <span style=\"color: #06960e;font-weight: bold\">pointer<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#333<\/span>;\n}\n<span style=\"font-style: italic\">#button<\/span><span style=\"font-style: italic\">:active<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#555<\/span>;\n}\n\n<\/pre>\n<p style=\"text-align: justify\">Poniewa\u017c przycisk jest elementem zakotwiczaj\u0105cym, a domy\u015blnie kotwice s\u0105 elementami \u015br\u00f3dliniowymi, musimy zmieni\u0107 w\u0142a\u015bciwo\u015b\u0107 wy\u015bwietlania na wbudowany blok, aby\u015bmy mogli przypisa\u0107 do niego wymiary.<\/p>\n<p style=\"text-align: justify\">Zr\u00f3bmy z niego kwadratowy przycisk 50*50px z zaokr\u0105glonymi k\u0105tami 4px. Ustawiamy dla niego jasny pomara\u0144czowy kolor i margines 30 px po ka\u017cdej stronie.<\/p>\n<p style=\"text-align: justify\">Ustalona pozycja zawsze b\u0119dzie umo\u017cliwia\u0142a naszemu przyciskowi pozostanie w tym samym miejscu podczas przewijania strony, a&nbsp;<code>z-index<\/code>&nbsp;z&nbsp;du\u017c\u0105 liczb\u0105 zapewna, \u017ce przycisk zawsze b\u0119dzie pokrywa\u0142 inne elementy strony.<\/p>\n<p style=\"text-align: justify\">Po najechaniu kursorem na przycisk kursor zmieni si\u0119 w wska\u017anik, a t\u0142o stanie si\u0119 ciemnoszare. Aby przej\u015bcie by\u0142o p\u0142ynne, przypisujemy warto\u015b\u0107 szybko\u015bci przej\u015bcia 0,3 sekundy do w\u0142a\u015bciwo\u015bci&nbsp;<code>background-color<\/code>. Ponadto, gdy klikniemy przycisk, kolor t\u0142a r\u00f3wnie\u017c si\u0119 zmieni i stanie si\u0119 nieco ja\u015bniejszy.<\/p>\n<hr>\n<div class=\"spacer\"><\/div>\n<h2 id=\"title2\" style=\"text-align: center\">Dodawanie ikony<\/h2>\n<p>Teraz nasz przycisk jest pusty, wi\u0119c dodajmy do niego ikon\u0119. Robimy to przez dodanie pseudo-elementu&nbsp;<code>::after<\/code>&nbsp;:<\/p>\n<pre style=\"background: #fff;color: #000\"><span style=\"font-style: italic\">#button<\/span><span style=\"font-style: italic\">::after<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">content<\/span>: <span style=\"color: #036a07\">\"<span style=\"color: #26b31a\">\\f<\/span>077\"<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">font-family<\/span>: FontAwesome;\n  <span style=\"color: #6d79de;font-weight: bold\">font-weight<\/span>: <span style=\"color: #06960e;font-weight: bold\">normal<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">font-style<\/span>: <span style=\"color: #06960e;font-weight: bold\">normal<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">font-size<\/span>: <span style=\"color: #0000cd\">2<span style=\"color: #00f;font-weight: bold\">em<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">line-height<\/span>: <span style=\"color: #0000cd\">50<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#fff<\/span>;\n}\n\n<\/pre>\n<p style=\"text-align: justify\">Wybieramy ikon\u0119 z najpopularniejszej biblioteki font\u00f3w <a href=\"https:\/\/fontawesome.com\/cheatsheet?from=io\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">FontAwesome<\/a>. Postanowi\u0142am wybra\u0107 ikon\u0119 \"<a href=\"https:\/\/fontawesome.com\/icons\/chevron-up?style=solid&amp;from=io\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Chevron Up<\/a>\".<\/p>\n<p style=\"text-align: justify\">Aby wy\u015bwietli\u0107&nbsp;j\u0105 w pseudoelementie, ustaw&nbsp;<code>font-family<\/code> na FontAwesome i przypisz warto\u015b\u0107 Unicode ikony do w\u0142a\u015bciwo\u015bci content.<\/p>\n<p style=\"text-align: justify\">Upewnij si\u0119 r\u00f3wnie\u017c, \u017ce wysoko\u015b\u0107 linii jest r\u00f3wna wysoko\u015bci twojej ikony, je\u015bli chcesz, aby ona by\u0142a wy\u015brodkowana w poziomie.<\/p>\n<hr>\n<h2 id=\"title3\" style=\"text-align: center\">Dodawanie funkcjonalno\u015bci za pomoc\u0105 jQuery<\/h2>\n<p style=\"text-align: justify\">W tej podsekcji poka\u017c\u0119 Ci, jak sprawi\u0107, aby przycisk dzia\u0142a\u0142 wed\u0142ug Twoich wymaga\u0144. Naj\u0142atwiejszym sposobem na osi\u0105gni\u0119cia tego celu jest u\u017cycie biblioteki jQuery w JavaScript. Najpierw musimy doda\u0107 jQuery do znacznik\u00f3w HTML naszego kodu. Dodaj t\u0105 lini\u0119 kodu tu\u017c przed zamykaj\u0105cym tagiem body.<\/p>\n<pre style=\"background: #fff;color: #000\"><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">script<\/span> <span style=\"font-style: italic\">src<\/span>=\u201d<span style=\"font-style: italic\">https:<\/span>\/\/<span style=\"font-style: italic\">cdnjs<\/span>.<span style=\"font-style: italic\">cloudflare<\/span>.<span style=\"font-style: italic\">com<\/span>\/<span style=\"font-style: italic\">ajax<\/span>\/<span style=\"font-style: italic\">libs<\/span>\/<span style=\"font-style: italic\">jquery<\/span>\/3.1.1\/<span style=\"font-style: italic\">jquery<\/span>.<span style=\"font-style: italic\">min<\/span>.<span style=\"font-style: italic\">js<\/span>\u201d&gt;&lt;\/<span style=\"font-weight: bold\">script<\/span>&gt;<\/span>\n<\/pre>\n<p style=\"text-align: justify\">Teraz mo\u017cemy napisa\u0107 nasz skrypt za pomoc\u0105 sk\u0142adni jQuery. Dodaj nast\u0119puj\u0105cy skrypt po linii jQuery:<\/p>\n<pre style=\"background: #fff;color: #000\">&lt;<span style=\"font-weight: bold\">script<\/span>&gt;\n\njQuery(<span style=\"color: #6d79de;font-weight: bold\">document<\/span>).ready(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n  \n  <span style=\"color: #00f;font-weight: bold\">var<\/span> btn <span style=\"color: #687687\">=<\/span> <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'#button'<\/span>);\n\n  <span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).<span style=\"color: #3c4c72;font-weight: bold\">scroll<\/span>(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n  });\n\n  btn.on(<span style=\"color: #036a07\">'click'<\/span>, <span style=\"color: #00f;font-weight: bold\">function<\/span>(e) {\n    e.preventDefault();\n    <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'html, body'<\/span>).animate({scrollTop:<span style=\"color: #0000cd\">0<\/span>}, <span style=\"color: #036a07\">'300'<\/span>);\n  });\n\n});\n\n&lt;\/<span style=\"font-weight: bold\">script<\/span>&gt;\n\n<\/pre>\n<p style=\"text-align: justify\">Przyjrzyjmy si\u0119 bli\u017cej temu skryptowi.<\/p>\n<p style=\"text-align: justify\">Zauwa\u017cysz pierwszy wiersz kodu:<\/p>\n<pre style=\"background: #fff;color: #000\">jQuery(<span style=\"color: #6d79de;font-weight: bold\">document<\/span>).ready(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n<\/pre>\n<p style=\"text-align: justify\">Zasadniczo m\u00f3wi\u0105c, uruchom kod wewn\u0105trz tej funkcji tylko wtedy, gdy dokument jest w pe\u0142ni za\u0142adowany. To \u015bwietny spos\u00f3b, aby zapobiec b\u0142\u0119dom, na wypadek gdyby kod JavaScript chcia\u0142 wprowadzi\u0107 zmiany w cz\u0119\u015bciach strony, kt\u00f3re nie&nbsp;by\u0142y&nbsp;w pe\u0142ni za\u0142adowane w przegl\u0105darce.<\/p>\n<p style=\"text-align: justify\">Kod uruchamiany po pe\u0142nym za\u0142adowaniu dokumentu sk\u0142ada si\u0119 z dw\u00f3ch g\u0142\u00f3wnych fragment\u00f3w kodu, z kt\u00f3rych ka\u017cdy wykonuje swoj\u0105 funkcj\u0119.<\/p>\n<p style=\"text-align: justify\">Pierwsza cz\u0119\u015b\u0107 skryptu powoduje, \u017ce przycisk Powr\u00f3t do g\u00f3ry pojawia si\u0119 i znika po przewini\u0119ciu strony do okre\u015blonego punktu. Druga cz\u0119\u015b\u0107 sprawia, \u017ce strona przewija si\u0119 do g\u00f3ry po klikni\u0119ciu przycisku. Przyjrzyjmy si\u0119 szczeg\u00f3\u0142owo ka\u017cdej z nich.<\/p>\n<hr>\n<h2 id=\"title4\" style=\"text-align: center\">Jak zrobi\u0107 aby przycisk Powr\u00f3t do g\u00f3ry pojawia\u0142 si\u0119 i znika\u0142<\/h2>\n<p>Ten kod odpowiada za t\u0105 akcj\u0119:<\/p>\n<pre style=\"background: #fff;color: #000\"> <span style=\"color: #00f;font-weight: bold\">var<\/span> btn <span style=\"color: #687687\">=<\/span> <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'#button'<\/span>);\n\n  <span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).<span style=\"color: #3c4c72;font-weight: bold\">scroll<\/span>(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n  });\n\n<\/pre>\n<p style=\"text-align: justify\">Najpierw deklarujemy zmienn\u0105 btn i kierujemy j\u0105 do elementu z identyfikatorem &nbsp;<code>button<\/code>, dzi\u0119ki czemu \u0142atwiej nam b\u0119dzie si\u0119 do niego odnie\u015b\u0107 p\u00f3\u017aniej w kodzie. Pomaga to r\u00f3wnie\u017c JavaScriptowi w szybszym wykonywaniu oblicze\u0144. Kiedy przechowujemy element w zmiennej, JavaScript nie b\u0119dzie musia\u0142 przeszukiwa\u0107 ca\u0142ej strony za ka\u017cdym razem, gdy b\u0119dziemy potrzebowali jego ponownie w naszym kodzie.<\/p>\n<p style=\"text-align: left\"><em><strong><a href=\"https:\/\/api.jquery.com\/scroll\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">.scroll()<\/a><\/strong><\/em><\/p>\n<p style=\"text-align: justify\">jQuery ma przydatn\u0105 funkcj\u0119&nbsp;<code>.scroll()<\/code>.&nbsp;Ona wi\u0105\u017ce kawa\u0142ek kodu, kt\u00f3ry b\u0119dzie wykonywany za ka\u017cdym razem, gdy wydarzy si\u0119 zdarzenie przewijania na stronie. Ma jeden parametr, kt\u00f3ry jest funkcj\u0105 wykonywan\u0105 za ka\u017cdym razem, gdy robisz przewijanie strony. Chocia\u017c mo\u017cna go zastosowa\u0107 do dowolnego przewijalnego elementu, takiego jak ramki i elementy z w\u0142a\u015bciwo\u015bci\u0105 przepe\u0142nienia ustawion\u0105 do przewijania, zazwyczaj stosujemy&nbsp;go do elementu okna, poniewa\u017c tam w\u0142a\u015bnie przewijanie wyst\u0119puje w wi\u0119kszo\u015bci przypadk\u00f3w, w tym w naszym przyk\u0142adzie.<\/p>\n<pre style=\"background: #fff;color: #000\"><span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).<span style=\"color: #3c4c72;font-weight: bold\">scroll<\/span>(<span style=\"color: #00f;font-weight: bold\">function<\/span>() {\n<\/pre>\n<p>Wewn\u0105trz funkcji umieszczamy t\u0105 instrukcj\u0119 if\/else:<\/p>\n<pre style=\"background: #fff;color: #000\">    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n\n<\/pre>\n<p style=\"text-align: justify\">Pr\u00f3bujemy tutaj sprawdzi\u0107 pionow\u0105 pozycj\u0119 paska przewijania i sprawi\u0107, by nasz przycisk pojawi\u0142 si\u0119, gdy znajdzie si\u0119 poni\u017cej pewnego punktu, i znikn\u0105\u0142, gdy jest powy\u017cej tego punktu.<\/p>\n<p style=\"text-align: justify\">Aby uzyska\u0107 aktualn\u0105 pozycj\u0119 paska przewijania, u\u017cyjemy wbudowanej metody jQuery &nbsp;<a href=\"https:\/\/api.jquery.com\/scrollTop\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">.scrollTop()<\/a>. Nie przyjmuje \u017cadnych argument\u00f3w i po prostu zwraca liczb\u0119 pikseli, kt\u00f3re s\u0105 ukryte nad przewijalnym obszarem.<\/p>\n<p style=\"text-align: justify\">Za ka\u017cdym razem, gdy przwiajmy stron\u0119, JavaScript sprawdza, ile pikseli jest ukrytych i por\u00f3wnuje je z ustawion\u0105 liczb\u0105. W naszym przypadku ustawi\u0142am t\u0105 liczb\u0119 na 300, ale mo\u017cna j\u0105 zmieni\u0107 w razie potrzeby.<\/p>\n<p style=\"text-align: justify\">Je\u015bli przekroczymy warto\u015b\u0107 300 pikseli, dodamy do naszego elementu przycisku klas\u0119&nbsp; &nbsp;<code>show<\/code>, kt\u00f3ra sprawi, \u017ce on pojawi si\u0119&nbsp;. Je\u015bli liczba&nbsp;b\u0119dzie mniejsza ni\u017c 300, usuwamy t\u0105 klas\u0119. Dodawanie i usuwanie klas jest kolejnym powodem&nbsp;popularno\u015bci jQuery. Mo\u017cemy to zrobi\u0107 za pomoc\u0105 dw\u00f3ch prostych metod <code>addClass()<\/code>&nbsp;i&nbsp;<code>removeClass()<\/code>.<\/p>\n<p style=\"text-align: justify\">Jednak nie mamy jeszcze klasy&nbsp;<code>show<\/code>&nbsp;w naszym CSS, dodajmy j\u0105:<\/p>\n<pre style=\"background: #fff;color: #000\">    <span style=\"color: #00f;font-weight: bold\">if<\/span> (<span style=\"color: #687687\">$<\/span>(<span style=\"color: #6d79de;font-weight: bold\">window<\/span>).scrollTop() <span style=\"color: #687687\">&gt;<\/span> <span style=\"color: #0000cd\">300<\/span>) {\n      btn.addClass(<span style=\"color: #036a07\">'show'<\/span>);\n    } <span style=\"color: #00f;font-weight: bold\">else<\/span> {\n      btn.removeClass(<span style=\"color: #036a07\">'show'<\/span>);\n    }\n\n<\/pre>\n<p style=\"text-align: justify\">Domy\u015blnie nasz przycisk&nbsp;jest ukryty, wi\u0119c b\u0119dziemy musieli doda\u0107 kilku dodatkowych regu\u0142 do elementu <code>#button<\/code>:<\/p>\n<pre style=\"background: #fff;color: #000\"><span style=\"font-style: italic\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">#button<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\"> {\n  transition: background-color <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">.3<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">s<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">, \n    opacity <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">.5<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">s<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">, visibility <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">.5<\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">s<\/span><\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">opacity<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">: <\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">0<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">;\n  <\/span><span style=\"color: #6d79de;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">visibility<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">: <\/span><span style=\"color: #06960e;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">hidden<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-5459b464\">;\n}<span class=\"sumo_twilighter_shares\">1<\/span><\/span>\n\n<\/pre>\n<p style=\"text-align: justify\">Aby przej\u015bcie by\u0142o p\u0142ynne, doda\u0142am dwie dodatkowe warto\u015bci do atrybutu przej\u015bcia, a ukrycie i widoczno\u015b\u0107 ustawi\u0142am&nbsp; na 0,5 sekundy.<\/p>\n<div class=\"spacer\"><\/div>\n<hr>\n<div class=\"spacer\"><\/div>\n<h2 id=\"title5\" style=\"text-align: center\">Przewijanie do g\u00f3ry<\/h2>\n<p style=\"text-align: justify\">Druga cz\u0119\u015b\u0107 skryptu umo\u017cliwia przewijanie do g\u00f3rnej cz\u0119\u015bci strony po klikni\u0119ciu przycisku.<\/p>\n<pre style=\"background: #fff;color: #000\">  <span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">btn.on(<\/span><span style=\"color: #036a07\"><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">'click'<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">, <\/span><span style=\"color: #00f;font-weight: bold\"><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">function<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">(e) {\n    e.preventDefault();\n    <\/span><span style=\"color: #687687\"><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">$<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">(<\/span><span style=\"color: #036a07\"><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">'html, body'<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">).animate({scrollTop:<\/span><span style=\"color: #0000cd\"><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">0<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">}, <\/span><span style=\"color: #036a07\"><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">'300'<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-7b88a6dd\">);\n  });<span class=\"sumo_twilighter_shares\">1<\/span><\/span>\n\n<\/pre>\n<p style=\"text-align: justify\">Pierwsza metoda jQuery, kt\u00f3r\u0105 tu widzimy, to <a href=\"http:\/\/api.jquery.com\/on\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">on()<\/a>. Jej pierwszym parametrem jest \"klikni\u0119cie\" zdarzenia JavaScript, kt\u00f3ra pojawia si\u0119 za ka\u017cdym razem, gdy klikniemy mysz\u0105 w przegl\u0105darce. Drugi parametr to funkcja modu\u0142u obs\u0142ugi, kt\u00f3ra&nbsp;zaczyna dzia\u0142a\u0107 wraz po wyst\u0105pieniu zdarzenia.<\/p>\n<p style=\"text-align: justify\">Funkcja handlera przyjmuje parametr zdarzenia. Potrzebujemy parametru zdarzenia, aby przekaza\u0107 go do funkcji i u\u017cy\u0107 dla metody&nbsp;<code>preventDefault()<\/code>.<\/p>\n<p style=\"text-align: justify\">Metoda&nbsp;<code>e.preventDefault()<\/code> pzapobiega domy\u015blnej akcji zdarzenia. W naszym przypadku nie ma to znaczenia, poniewa\u017c nasz element zakotwiczaj\u0105cy nie ma atrybutu&nbsp;<code>href<\/code>&nbsp;i nie przeni\u00f3s\u0142by nas do nowej strony, ale zawsze lepiej jest dok\u0142adnie sprawdzi\u0107.<\/p>\n<p><strong><em><a href=\"http:\/\/api.jquery.com\/animate\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">.animate()<\/a><\/em><\/strong><\/p>\n<p>Metoda jQuery <code>.animate()<\/code>&nbsp;- to g\u0142\u00f3wny element.<\/p>\n<pre style=\"background: #fff;color: #000\">    <span style=\"color: #687687\">$<\/span>(<span style=\"color: #036a07\">'html, body'<\/span>).animate({scrollTop:<span style=\"color: #0000cd\">0<\/span>}, <span style=\"color: #036a07\">'300'<\/span>);\n<\/pre>\n<p style=\"text-align: justify\">Pierwszy parametr metody&nbsp;<code>.animate()<\/code> to lista w\u0142a\u015bciwo\u015bci, kt\u00f3re powinni\u015bmy animowa\u0107. Nasza \u0142a\u015bciwo\u015b\u0107 jest nazywana&nbsp;<code>scrollTop<\/code>, i ma warto\u015b\u0107&nbsp;<code>0<\/code>.&nbsp;Typ tego parametru jest prostym obiektem, wi\u0119c musimy u\u017cy\u0107 nawias\u00f3w klamrowych i zapisa\u0107 nasze warto\u015bci, u\u017cywaj\u0105c sk\u0142adni pary&nbsp;klucz\/warto\u015b\u0107.<\/p>\n<p style=\"text-align: justify\">Drugi parametr to szybko\u015b\u0107 animacji. Jest mierzona w milisekundach - im wy\u017csza b\u0119dfzie liczba, tym wolniejsza animacja. Domy\u015blna szybko\u015b\u0107 jest ustawiona na 400, ale zmieni\u0142am j\u0105 na 300.<\/p>\n<p style=\"text-align: justify\">Na koniec stosujemy metod\u0119 animacji do element\u00f3w HTML i body element\u00f3w na naszej stronie.<\/p>\n<p style=\"text-align: justify\">Teraz za ka\u017cdym razem, gdy klikniemy przycisk Powr\u00f3t do g\u00f3ry, zostaniemy przeniesieni do g\u00f3rnej cz\u0119\u015bci strony.<\/p>\n<div class=\"spacer\"><\/div>\n<hr>\n<div class=\"spacer\"><\/div>\n<h2 id=\"title6\" class=\"has-text-align-center\">FAQ<\/h2>\n<div class=\"schema-faq wp-block-yoast-faq-block\">\n<div class=\"schema-faq-section\"><strong class=\"schema-faq-question\">Czym jest przycisk powrotu do g\u00f3ry?<\/strong><\/p>\n<p class=\"schema-faq-answer\">Jest to ikona w kszta\u0142cie strza\u0142ki, kt\u00f3r\u0105 zwykle umieszcza si\u0119 w prawym dolnym rogu ekranu. Po naci\u015bni\u0119ciu - strona przewija si\u0119 w g\u00f3r\u0119.<\/p>\n<\/div>\n<div class=\"schema-faq-section\"><strong class=\"schema-faq-question\">Dlaczego potrzebuj\u0119 przycisku powrotu do g\u00f3ry?<\/strong><\/p>\n<p class=\"schema-faq-answer\">Jest to bardzo wygodne dla u\u017cytkownika, zw\u0142aszcza je\u015bli strona jest d\u0142uga i zawiera du\u017co tre\u015bci. Przycisk powrotu do g\u00f3ry poprawia komfort u\u017cytkowania i uprzyjemnia odwiedzanie witryny.<\/p>\n<\/div>\n<div class=\"schema-faq-section\"><strong class=\"schema-faq-question\">Co zawira przycisk powrotu do g\u00f3ry?<\/strong><\/p>\n<p class=\"schema-faq-answer\">Sk\u0142ada si\u0119 z cz\u0119\u015bci projektowej CSS i ma\u0142ego skryptu jQuery, kt\u00f3ry sprawia, \u017ce dzia\u0142a.<\/p>\n<\/div>\n<\/div>\n<div class=\"spacer\"><\/div>\n<hr>\n<div class=\"spacer\"><\/div>\n<p style=\"text-align: center\"><em>Ten artyku\u0142 zosta\u0142 przet\u0142umaczony z angielskiego. Orygina\u0142 mo\u017cna znale\u017a\u0107 tutaj:&nbsp;<a href=\"https:\/\/www.templatemonster.com\/blog\/back-to-top-button-css-jquery\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Creating a Back to Top Button with CSS &amp; jQuery<\/a><\/em><\/p>\n<div><\/div>\n<hr>\n<div class=\"spacer\"><\/div>\n<p style=\"text-align: center\">* * *<\/p>\n<p style=\"text-align: justify\">Przycisk \"Powr\u00f3t do g\u00f3ry\" to \u015bwietny spos\u00f3b na wzmocnienie u\u017cyteczno\u015bci strony, kt\u00f3ry na pewno doceni\u0105 wszyscy jej odwiedzaj\u0105ce. Mam nadziej\u0119, \u017ce ten tutorial pom\u00f3g\u0142 Ci poszerzy\u0107 swoj\u0105 wiedz\u0119 w zakresie CSS i JavaScript, zapewniaj\u0105c pewne momenty , kt\u00f3re mog\u0105 sta\u0107 si\u0119 przydatne dla pocz\u0105tkuj\u0105cych projektant\u00f3w stron internetowych i programist\u00f3w.<\/p>\n<hr>\n<h2 style=\"text-align: center\">Czytaj tak\u017ce<\/h2>\n<p class=\"title\"><a href=\"https:\/\/www.templatemonster.com\/blog\/pl\/komendy-css-ktore-rozsmiesza-cie\/\" target=\"_blank\">Komendy CSS, kt\u00f3re roz\u015bmiesz\u0105 Ci\u0119 do \u0142ez<\/a><\/p>\n<p class=\"title\"><a href=\"https:\/\/www.templatemonster.com\/blog\/pl\/5-powodow-dla-ktorych-warto-nauczyc-sie-html-i-css\/\" target=\"_blank\">5 powod\u00f3w, dla kt\u00f3rych warto nauczy\u0107 si\u0119 HTML i CSS<\/a><\/p>\n<p class=\"title\"><a href=\"https:\/\/www.templatemonster.com\/blog\/pl\/darmowe-efekty-css3\/\" target=\"_blank\">Darmowe efekty CSS3 do kopiowania i wklejania<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS style d\u0142a przycisku Powr\u00f3t do g\u00f3ry Dodawanie ikony Dodawanie funkcjonalno\u015bci za pomoc\u0105 jQuery Jak zrobi\u0107 aby przycisk Powr\u00f3t do g\u00f3ry pojawia\u0142 si\u0119 i znika\u0142 Przewijanie do g\u00f3ry FAQ Przycisk Powr\u00f3t do g\u00f3ry - to jeden z najcz\u017a\u015bciej wykorzystywanych na stronach element\u00f3w. Ta strza\u0142ka pojawia si\u0119 w prawym dolnym rogu strony po rozpocz\u0119ciu przewijania. Po [&hellip;]<\/p>\n","protected":false},"author":2098093,"featured_media":6595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[229,23,136,130],"tags":[66,183,75],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tworzenie przycisku Powr\u00f3t do g\u00f3ry za pomoc\u0105 CSS i jQuery<\/title>\n<meta name=\"description\" content=\"Tutorial na temat tworzenia przycisku Powr\u00f3t do g\u00f3ry z pomoc\u0105 technologii CSS i jQuery, kt\u00f3ry b\u0119dzie przydatny dla pocz\u0105tkuj\u0105cych programist\u00f3w.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tworzenie przycisku Powr\u00f3t do g\u00f3ry za pomoc\u0105 CSS i jQuery\" \/>\n<meta property=\"og:description\" content=\"Tutorial na temat tworzenia przycisku Powr\u00f3t do g\u00f3ry z pomoc\u0105 technologii CSS i jQuery, kt\u00f3ry b\u0119dzie przydatny dla pocz\u0105tkuj\u0105cych programist\u00f3w.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Polski Blog TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-25T10:39:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-31T18:00:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2018\/07\/Powr\u00f3t-do-g\u00f3ry-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Katarzyna Paw\u0142owska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Polska\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katarzyna Paw\u0142owska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/\"},\"author\":{\"name\":\"Katarzyna Paw\u0142owska\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\"},\"headline\":\"Tworzenie przycisku &#8220;Powr\u00f3t do g\u00f3ry&#8221; za pomoc\u0105 CSS i jQuery\",\"datePublished\":\"2020-05-25T10:39:30+00:00\",\"dateModified\":\"2020-05-31T18:00:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/\"},\"wordCount\":1530,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"keywords\":[\"Dostosowywanie\",\"Tutorial\",\"Tworzenie stron internetowych\"],\"articleSection\":[\"HTML i CSS\",\"Tutoriale\",\"Tworzenie stron internetowych\",\"Usability\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/\",\"name\":\"Tworzenie przycisku Powr\u00f3t do g\u00f3ry za pomoc\u0105 CSS i jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\"},\"datePublished\":\"2020-05-25T10:39:30+00:00\",\"dateModified\":\"2020-05-31T18:00:34+00:00\",\"description\":\"Tutorial na temat tworzenia przycisku Powr\u00f3t do g\u00f3ry z pomoc\u0105 technologii CSS i jQuery, kt\u00f3ry b\u0119dzie przydatny dla pocz\u0105tkuj\u0105cych programist\u00f3w.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tworzenie przycisku &#8220;Powr\u00f3t do g\u00f3ry&#8221; za pomoc\u0105 CSS i jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#website\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"name\":\"Polski Blog TemplateMonster\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#organization\",\"name\":\"MonsterPost Polska\",\"url\":\"https:\/\/monsterspost.com\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Polska\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/templatemonster_pl\/\",\"https:\/\/www.pinterest.com\/TM_Polska\/\",\"https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ\",\"https:\/\/www.facebook.com\/TemplateMonster.Poland\/\",\"https:\/\/twitter.com\/TM_Polska\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8\",\"name\":\"Katarzyna Paw\u0142owska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Katarzyna Paw\u0142owska\"},\"description\":\"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.\",\"url\":\"https:\/\/monsterspost.com\/pl\/author\/katrina\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tworzenie przycisku Powr\u00f3t do g\u00f3ry za pomoc\u0105 CSS i jQuery","description":"Tutorial na temat tworzenia przycisku Powr\u00f3t do g\u00f3ry z pomoc\u0105 technologii CSS i jQuery, kt\u00f3ry b\u0119dzie przydatny dla pocz\u0105tkuj\u0105cych programist\u00f3w.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/","og_locale":"pl_PL","og_type":"article","og_title":"Tworzenie przycisku Powr\u00f3t do g\u00f3ry za pomoc\u0105 CSS i jQuery","og_description":"Tutorial na temat tworzenia przycisku Powr\u00f3t do g\u00f3ry z pomoc\u0105 technologii CSS i jQuery, kt\u00f3ry b\u0119dzie przydatny dla pocz\u0105tkuj\u0105cych programist\u00f3w.","og_url":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/","og_site_name":"Polski Blog TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.Poland\/","article_published_time":"2020-05-25T10:39:30+00:00","article_modified_time":"2020-05-31T18:00:34+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2018\/07\/Powr\u00f3t-do-g\u00f3ry-01.jpg","type":"image\/jpeg"}],"author":"Katarzyna Paw\u0142owska","twitter_card":"summary_large_image","twitter_creator":"@TM_Polska","twitter_site":"@TM_Polska","twitter_misc":{"Napisane przez":"Katarzyna Paw\u0142owska","Szacowany czas czytania":"9 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/"},"author":{"name":"Katarzyna Paw\u0142owska","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8"},"headline":"Tworzenie przycisku &#8220;Powr\u00f3t do g\u00f3ry&#8221; za pomoc\u0105 CSS i jQuery","datePublished":"2020-05-25T10:39:30+00:00","dateModified":"2020-05-31T18:00:34+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/"},"wordCount":1530,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"keywords":["Dostosowywanie","Tutorial","Tworzenie stron internetowych"],"articleSection":["HTML i CSS","Tutoriale","Tworzenie stron internetowych","Usability"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/","url":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/","name":"Tworzenie przycisku Powr\u00f3t do g\u00f3ry za pomoc\u0105 CSS i jQuery","isPartOf":{"@id":"https:\/\/monsterspost.com\/pl\/#website"},"datePublished":"2020-05-25T10:39:30+00:00","dateModified":"2020-05-31T18:00:34+00:00","description":"Tutorial na temat tworzenia przycisku Powr\u00f3t do g\u00f3ry z pomoc\u0105 technologii CSS i jQuery, kt\u00f3ry b\u0119dzie przydatny dla pocz\u0105tkuj\u0105cych programist\u00f3w.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/pl\/przycisku-powrot-do-gory-w-css-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Tworzenie przycisku &#8220;Powr\u00f3t do g\u00f3ry&#8221; za pomoc\u0105 CSS i jQuery"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/pl\/#website","url":"https:\/\/monsterspost.com\/pl\/","name":"Polski Blog TemplateMonster","description":"","publisher":{"@id":"https:\/\/monsterspost.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/pl\/#organization","name":"MonsterPost Polska","url":"https:\/\/monsterspost.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Polska"},"image":{"@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/templatemonster_pl\/","https:\/\/www.pinterest.com\/TM_Polska\/","https:\/\/www.youtube.com\/channel\/UCjXro5nNpRT0p0YY6MGl4sQ","https:\/\/www.facebook.com\/TemplateMonster.Poland\/","https:\/\/twitter.com\/TM_Polska"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/2999e876fc63abe75a8811b5d8e045d8","name":"Katarzyna Paw\u0142owska","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/monsterspost.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5711b6355781e59c81d4da82c476bd97?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Katarzyna Paw\u0142owska"},"description":"W bran\u017cy IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwi\u0105za\u0144 u\u017cytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propaguj\u0105ce wiedz\u0119 z dziedziny SMM i rozwija swoj\u0105 mi\u0142o\u015b\u0107 do crossfitu.","url":"https:\/\/monsterspost.com\/pl\/author\/katrina\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/6594"}],"collection":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/users\/2098093"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/comments?post=6594"}],"version-history":[{"count":8,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/6594\/revisions"}],"predecessor-version":[{"id":13336,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/posts\/6594\/revisions\/13336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media\/6595"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/media?parent=6594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/categories?post=6594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/pl\/wp-json\/wp\/v2\/tags?post=6594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}