{"id":358,"date":"2013-08-15T09:44:46","date_gmt":"2013-08-15T07:44:46","guid":{"rendered":"http:\/\/webowiec.net\/blog\/?p=358"},"modified":"2013-08-15T12:42:05","modified_gmt":"2013-08-15T10:42:05","slug":"jquery-nowoczesny-przycisk-przewin-do-gory","status":"publish","type":"post","link":"https:\/\/webowiec.net\/blog\/jquery-nowoczesny-przycisk-przewin-do-gory\/","title":{"rendered":"[jQuery] nowoczesny przycisk “przewi\u0144 do g\u00f3ry”"},"content":{"rendered":"

Szybki tutorial JavaScript u\u017cywaj\u0105cy jQuery do wy\u015bwietlenia przycisku “skocz na g\u00f3r\u0119 strony”.<\/strong><\/p>\n

Opis:<\/span>
\n– prze\u017aroczysta ikonka ze strza\u0142k\u0105 pojawia si\u0119 po przewini\u0119ciu strony o zadan\u0105 wysoko\u015b\u0107 (np. 200px) i znika po powrocie na sam\u0105 g\u00f3r\u0119,
\n– po najechaniu myszk\u0105 ikonka staje si\u0119 bardziej widoczna (mniej prze\u017aroczysta)
\n– po klikni\u0119ciu w ikonk\u0119 uruchamia si\u0119 p\u0142ynne przej\u015bcie u\u017cytkownika na sam\u0105 g\u00f3r\u0119 strony<\/p>\n

Przyk\u0142ad:<\/span>
\n– na tym blogu (przewi\u0144 strone troch\u0119 ni\u017cej aby zobaczy\u0107)<\/p>\n

Gotowiec:<\/span>
\n– wtyczka wordpress: \u00a0https:\/\/webowiec.net\/blog\/wordpress-go-top-of-the-page-skocz-na-gore-strony\/<\/a><\/p>\n

<\/p>\n

1. Pobierz ikonk\u0119:<\/strong><\/span><\/p>\n

\"\"<\/a>(kliknij prawym przyciskiem myszy i wybierz “zapisz element docelowy jako”)\u00a0<\/span><\/p>\n

2. Dodaj kod HTML do swojego nag\u0142\u00f3wka strony (lub sam kod CSS umie\u015b\u0107 w pliku ze stylem strony):<\/strong><\/span><\/p>\n

[css]
\n<style type=\u201dtext\/css\u201d>
\n#scroolTOP { display: none;position: fixed; z-index:99999; right: 20px; bottom: 20px;border:0px; }
\n.gototop_icon_i { width:45px;height:45px; }
\n<\/style>
\n[\/css]<\/p>\n

3. Dodaj jQuery do swojej strony\/bloga :<\/strong><\/span><\/p>\n

mo\u017cna to zrobi\u0107 na dwa sposoby:
\n– pobra\u0107 skrypt bezpo\u015brednio ze strony: http:\/\/code.jquery.com\/jquery-1.10.2.min.js<\/a> i umie\u015bci\u0107 w kodzie strony<\/p>\n

LUB<\/p>\n

– doda\u0107 kod do nag\u0142\u00f3wka strony (sekcja HEAD):<\/p>\n

[html]
\n<script type="text\/javascript" src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js"><\/script>
\n[\/html]<\/p>\n

4. Dodaj skrypt JavaScript:<\/strong><\/span><\/p>\n

Podobnie jak CSS, mo\u017cesz wstawi\u0107 fragment skryptu bezpo\u015brednio do nag\u0142\u00f3wka strony, lub skopiowa\u0107 go do pliku ze skryptami js strony:<\/p>\n

[js]
\n<script type="text\/javascript">
\nvar gototop_icon = "https:\/\/webowiec.net\/blog\/wp-content\/uploads\/2013\/08\/1376566775_upload21.png";
\nvar gototop_run = false;
\njQuery(window).scroll(function(){ \/\/scrool<\/p>\n

\tvar scrollTop = jQuery(window).scrollTop();<\/p>\n

\tif ( scrollTop>200 ) { \/\/ pokaz
\n\t\tif ( ! gototop_run ) {
\n\t\tgototop_run = true;
\n\t\tjQuery(‘body’).append(‘<a id="scroolTOP" href="#"><img src="’+gototop_icon+’" class="gototop_icon_i" alt="TOP"><\/a>’);
\n\t\tjQuery(‘#scroolTOP’).fadeTo(‘quick’, 0.2);
\n\t\tjQuery(‘#scroolTOP’).mouseover(function(){ jQuery(this).fadeTo(100, 0.6); })
\n\t\t\t.mouseout(function(){ jQuery(this).fadeTo(100, 0.2); });
\n\t\tjQuery(‘#scroolTOP’).click(function(){
\n\t\t\tjQuery("html, body").animate({ ‘scrollTop’: 0 }, 500);
\n\t\t\treturn false;
\n\t\t});
\n\t\t}
\n\t} else { \/\/ ukryj
\n\t\tif ( jQuery(‘#scroolTOP’).length>0 ) jQuery(‘#scroolTOP’).fadeOut(‘quick’).remove();
\n\t\tgototop_run = false;
\n\t}
\n}); \/\/scrool
\n<\/script>
\n[\/js]<\/p>\n

UWAGA! Pami\u0119taj aby edytowa\u0107 zmienn\u0105 “gototop_icon<\/em>” (pierwsza linia skryptu) i wklei\u0107 tam \u015bcie\u017c\u0119 do pobranej wcze\u015bniej ikonki (punkt 1)<\/strong><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

Szybki tutorial JavaScript u\u017cywaj\u0105cy jQuery do wy\u015bwietlenia przycisku “skocz na g\u00f3r\u0119 strony”. Opis: – prze\u017aroczysta ikonka ze strza\u0142k\u0105 pojawia si\u0119 po przewini\u0119ciu strony o zadan\u0105 wysoko\u015b\u0107 (np. 200px) i znika po powrocie na sam\u0105 g\u00f3r\u0119, – po najechaniu myszk\u0105 ikonka … <\/i> Czytaj ca\u0142o\u015b\u0107<\/a><\/p>\n","protected":false},"author":4,"featured_media":363,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,437,5,3,6],"tags":[596,153,578,591,152,594,415,592,593,232,597,598,590,595],"class_list":["post-358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-javascript-2","category-poradniki","category-porady-dla-webmasterow","category-tourtale","tag-animacja-na-gore-strony","tag-css","tag-go-to-top","tag-go-top-of-the-page","tag-html","tag-idz-na-top-strony","tag-jquery","tag-jquery-go-top","tag-jquery-skocz-na-gore-strony","tag-js","tag-plynne-przejscie-na-gore-strony","tag-skocz-do-naglowka-strony","tag-skocz-na-gore-strony","tag-skocz-na-sama-gore-strony"],"_links":{"self":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":9,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/358\/revisions"}],"predecessor-version":[{"id":373,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/358\/revisions\/373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media\/363"}],"wp:attachment":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/categories?post=358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}