{"id":1194,"date":"2013-10-04T04:21:15","date_gmt":"2013-10-04T04:21:15","guid":{"rendered":"http:\/\/musilda.cz\/?p=1194"},"modified":"2013-10-04T04:21:15","modified_gmt":"2013-10-04T04:21:15","slug":"scroll-to-top-odkaz-jquery","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/scroll-to-top-odkaz-jquery\/","title":{"rendered":"Scroll to top odkaz jQuery"},"content":{"rendered":"\n<p>N\u011bkter\u00e9 WordPress \u0161ablony maj\u00ed tu nep\u0159\u00edjemnou vlastnost, \u017ee v\u00fdpis \u010dl\u00e1nk\u016f je dlouh\u00fd a v pati\u010dce nejsou \u017e\u00e1dn\u00e9 naviga\u010dn\u00ed prvky. Mus\u00edte pak scrollovat celou str\u00e1nkou a\u017e zp\u011bt na za\u010d\u00e1tek, aby jste se dostali k menu a dal\u0161\u00ed nab\u00eddce \u010dl\u00e1nk\u016f. Proto si dne uk\u00e1\u017eeme jednoduch\u00fd postup, jak p\u0159idat do pati\u010dky odkaz, kter\u00fd v\u00e1s vr\u00e1t\u00ed na za\u010d\u00e1tek str\u00e1nky.<\/p>\n\n\n\n<p>Nejjednodu\u0161\u0161\u00ed postup je vytvo\u0159it takzvanou kotvu a po kliknut\u00ed se str\u00e1nka p\u0159esune na m\u00edsto kotvy. Tagu body p\u0159id\u00e1me id=&#8220;frame&#8220; a odkazovat na n\u011bj budeme pomoc\u00ed href=&#8220;#frame&#8220;. To je ale jen p\u0159\u00edklad, kter\u00fd nepou\u017eijeme, proto\u017ee p\u0159esun je okam\u017eit\u00fd a p\u016fsob\u00ed nep\u0159\u00edjemn\u011b.<\/p>\n\n\n\n<p>Vytvo\u0159\u00edme si tedy v pati\u010dce odkaz, nebo ikonku, m\u016f\u017ee vypadat t\u0159eba takto:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2013\/10\/scroll-to-top.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"169\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2013\/10\/scroll-to-top.png\" alt=\"\" class=\"wp-image-1195\" title=\"scroll to top\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/10\/scroll-to-top.png 312w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2013\/10\/scroll-to-top-300x163.png 300w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/a><\/figure>\n\n\n\n<p>A odkaz bude vypadat takto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a class=\"ico-top\" href=\"#\"&gt;\n&lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/ikonka.png\" \/&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Do souboru s javascriptem vlo\u017e\u00edme tento k\u00f3d:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery(\"a.ico-top\").click(function(){\n  jQuery(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\n\n  return false;\n});\n<\/code><\/pre>\n\n\n\n<p>Proto\u017ee tento postup vyu\u017e\u00edv\u00e1 jQuery, mus\u00edte se ujistit, \u017ee je knihovna v \u0161ablon\u011b includovan\u00e1 a v js souboru by m\u011bla b\u00fdt funkce um\u00edst\u011bna v:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery(document).ready(function() {\n\n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>N\u011bkter\u00e9 WordPress \u0161ablony maj\u00ed tu nep\u0159\u00edjemnou vlastnost, \u017ee v\u00fdpis \u010dl\u00e1nk\u016f je dlouh\u00fd a v pati\u010dce nejsou \u017e\u00e1dn\u00e9 naviga\u010dn\u00ed prvky. Mus\u00edte pak scrollovat celou str\u00e1nkou a\u017e zp\u011bt na za\u010d\u00e1tek, aby jste se dostali k menu a dal\u0161\u00ed nab\u00eddce \u010dl\u00e1nk\u016f. Proto si dne uk\u00e1\u017eeme jednoduch\u00fd postup, jak p\u0159idat do pati\u010dky odkaz, kter\u00fd v\u00e1s vr\u00e1t\u00ed na za\u010d\u00e1tek str\u00e1nky.<\/p>\n","protected":false},"author":1,"featured_media":9482,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,12,19],"tags":[338],"class_list":["post-1194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-navody","category-snippety","tag-scroll-to-top"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1194"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=1194"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/1194\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/9482"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=1194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=1194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=1194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}