Botão 'ir ao topo da página'

Esta eu vi no WebDesignerWall e achei o efeito bacana. Um botão de 'ir ao topo da página' (Animated Scroll to Top) com  JQuery. Para ver como fica, aqui o Demo (role a página para baixo). Vou ensinar a colocar este botão no blogger.

1- Vá em Editar HTML e antes da tag </head>, coloque os scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>

<script>
$(document).ready(function(){

    // hide #back-top first
    $(&quot;#back-top&quot;).hide();
  
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#back-top&#39;).fadeIn();
            } else {
                $(&#39;#back-top&#39;).fadeOut();
            }
        });

        // scroll body to 0px on click
        $(&#39;#back-top a&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>

2- Coloque no CSS* do template o seguinte trecho:

#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}

#back-top a:hover {color: #000;}

/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(http://1.bp.blogspot.com/-sC3qXtoirKo/TdEO99T9TWI/AAAAAAAATbY/e8zExwrL3yM/s1600/up-arrow.png) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}

#back-top a:hover span {   background-color: #777;}

*CSS: pode ser logo após do trecho:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

3- No HTML, antes de  <footer><div class='footer-outer'>, coloque:

<div id='back-top'>
<a href='#top'><span/>Back to Top</a>
</div>

E pronto. Veja como ficou em um dos novos modelos do Blogger.

Leia Mais