Hogyan építs be "lap tetejére ugrás" gombot?

Ha hosszú blogbejegyzést írok, és valaki vissza akar jutni a felső menühöz, hosszasan kell görgetnie.

Ezt a macerát megkönnyíti, hogyha "lap tetejére ugrás" gombot építek be.

Ha ezen az oldalon lefelé görgetsz, kb az oldal felénél megjelenik jobb oldalon egy átlátszó dobozban levő "Ugrás az oldal tetejére" doboz.

Hogyan tudsz ilyet beépíteni az oldaladba?

1. Belépés a sablon HTML szerkesztőjébe

Irányítópult > Téma menüpont kiválasztása után a sablon képe alatt kiválasztom a „HTML kód szerkesztése” lehetőséget.

Ekkor bejön egy ablak, ahol a kódsorokat látom.

Figyelem:
Ne változtassunk semmin a kódban, az alább leírtakon kívül, mert működő képtelenné teheti a sablont  - hacsak nem értünk hozzá, mit és hogyan kell/lehet változtatni :-)

2. Kódtábla kinyitása

Fontos tudni, hogy itt nem jelenik meg a teljes kódsor magától.

Ki kell nyitni.

Ezt úgy lehet megtenni, hogyha keresek olyan sort, ahol a sor eleji számok után kis, tömör fekete nyíl van. Erre a nyílra kell kattintani, és akkor kinyílik a teljes kódsor.

Ezután bele klikkelek a kódsor ablakába, egy olyan helyen, ahol nincsen semmi, így már tudok mozogni a kódtáblán belül.

Ctrl+f billentyű kombinációval megnyitom a kereső ablakot.

3. Beillesztés helyének megkeresése

A kereső ablakba bemásolom ezt a kódsort:

</body> 

Kicsit halványan látszik, de fontos, hogy a body szó előtt van egy per jel. Ha csak a body szóra keresek rá, abból több is található a kódban.

Ha a keresőablakba kattintok a szöveg mögé, és nyomok egy Entert, akkor a következő ilyen kódra áll (sárgán kijelöli).

4. Kód beillesztés

A fenti kódsor  elé nyitok Enterrel egy új sort (az előző sor szövegének utolsó karaktere után kattintva nyomom az Entert), és bemásolom a következő kódot:

<style type='text/css'> #MD-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function() {     $.fn.scrollToTop = function() {     $(this).hide().removeAttr(&quot;href&quot;);     if ($(window).scrollTop() != &quot;0&quot;) {         $(this).fadeIn(&quot;slow&quot;)     }     var scrollDiv = $(this);     $(window).scroll(function() {         if ($(window).scrollTop() == &quot;0&quot;) {         $(scrollDiv).fadeOut(&quot;slow&quot;)         } else {         $(scrollDiv).fadeIn(&quot;slow&quot;)         }     });     $(this).click(function() {         $(&quot;html, body&quot;).animate({         scrollTop: 0         }, &quot;slow&quot;)     })     } }); $(function() {     $(&quot;#MD-StoTop&quot;).scrollToTop(); }); </script> <a href='#' id='MD-StoTop' style='display:none;'>Ugrás az oldal tetejére</a>



Sortörés nélkül!
És ha alatta automatikusan megnyit egy újabb sort, akkor azt is kitörlöm.

5. Mentés!!!

A kódtábla felett bal oldalon található nagy sárga "Téma mentése" gombbal varázsolhatom az oldalamra, amit működtem :-)