Klikací "Přesunout se na začátek"

Tahle vymoženost se bude hodit hlavně blogům s mnoha příspěvky na jedné stránce. Tuhle funkci má třeba Tumblr - místo pracného scrollování zpátky nahoru můžete kliknout na šipku v rohu stránky a jste na začátku dřív, než řeknete popel.

A jak na to?

1. V prostředí blogu vyberte Rozvržení a poté na Přidat gadget.

2. V nabídce přidejte gadget HTML/JavaScript.

3. V případě, že vám stačí pouhý text, do okna zkopírujte tento kód:

<!--Smooth Back to Top Button Start--> <script>jQuery(document).ready(function()  {var offset = 220;var duration = 500;jQuery(window).scroll(function()  {if (jQuery(this).scrollTop() > offset)  {jQuery('.back-to-top').fadeIn(duration);}  else {jQuery('.back-to-top').fadeOut(duration);}});jQuery('.back-to-top').click(function(event)  {event.preventDefault();jQuery('html, body').animate({scrollTop: 0}, duration);return false;})});</script><style>div#page  {max-width: 900px;margin-left: auto;margin-right: auto;padding: 20px;}.back-to-top {position: fixed;bottom: 2em;right: 0px;text-decoration: none;color: #000000;font-size: 12px;padding: 1em;display: none;}. back-to-top:hover {text-decoration: none;}</style> <a href="#" class="back-to-top">VÁŠ TEXT</a> <!--Smooth Back to Top Button End-->

Já ale spíš doporučuji obrázek. Když zadáte do vyhledávače "scroll to top button", najdete jich kvanta. Nebo pokud jste šikovní, můžete si udělat vlastní. Tak či tak, kód se jen lehce změní:

<!--Smooth Back to Top Button Start--> <script>jQuery(document).ready(function()  {var offset = 220;var duration = 500;jQuery(window).scroll(function()  {if (jQuery(this).scrollTop() > offset)  {jQuery('.back-to-top').fadeIn(duration);}  else {jQuery('.back-to-top').fadeOut(duration);}});jQuery('.back-to-top').click(function(event)  {event.preventDefault();jQuery('html, body').animate({scrollTop: 0}, duration);return false;})});</script><style>div#page  {max-width: 900px;margin-left: auto;margin-right: auto;padding: 20px;}.back-to-top {position: fixed;bottom: 2em;right: 0px;text-decoration: none;color: #000000;font-size: 12px;padding: 1em;display: none;}. back-to-top:hover {text-decoration: none;}</style> <a href="#" class="back-to-top"><img src="ADRESA OBRÁZKU" alt="Back to Top" / ></a> <!--Smooth Back to Top Button End-->

A klikněte na Uložit.

Například já jsem si vybrala tento obrázek, proto poslední část kódu vypadá takto:

<img src="http://media.tumblr.com/ad58ccbdf7a9c05d4cbc4ad6b5808481/tumblr_inline_nbq6lgCgvb1rxvux9.png" alt="Back to Top" / ></a> <!--Smooth Back to Top Button End-->

4. V levé nabídce zvolte Šablonu, poté Upravit HTML.

5. Klikněte kamkoliv do kódu a zmáčkněte kombinaci kláves CTRL a F. Vyskočí vám vyhledávající okénko, kam napište head a stiskněte enter. Hledaný výraz se barevně označí. Těsně pod výraz zkopírujte tento kód:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

A uložte!

6. Výsledek bude vypadat nějak takto:

Něco nefunguje nebo máte dotaz? Napište mi do komentářů, ráda pomůžu!

Hezké blogování!