Como adicionar um botão Ir para o topo?

Sempre gostei muito do botão Ir para o topo(Scroll to top) no sites, antes mesmo de pensar em ser um desenvolvedor. Este botão é fantástico, pois faz você voltar ao topo do site sem precisar ficar rolando a barra de rolagem até o topo do site.

Para alguns, como eu, nem imaginava como fazer este botão funcionar, ainda mais naquele tempo de Javascript puro, sem nenhum framework! Ainda bem que veio o JQuery e seus maravilhosos plugins, hoje irei mostrar como fazer este botão utilizando o plugin jQuery topLink.

O jQuery topLink Plugin


O jQuery topLink Plugin é um plugin bem prático, tudo que você tem que fazer é fazer a importação da biblioteca jQuery e da biblioteca ScrollTo, o topLink Plugin é uma espécie de extensão do ScrollTo.

Importação das bibliotecas

{code type=html}

<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”jquery.scrollTo-1.4.0-min.js”></script>

{/code}

Código HTML

{code type=html}

<a href=”#top” id=”top-link”>Top of Page</a>

{/code}

Código CSS

{code type=css}

#top-link {
display:none;
position:fixed;
right:5px;
bottom:5px;
color:green;
font-weight:bold;
text-decoration:none;
border:1px solid green;
background:Lightgreen;
padding:10px;
}

{/code}

Código JS

{code type=javascript}

//plugin
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.hide(); //in case the user forgot
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

//usage w/ smoothscroll
$(document).ready(function() {
//set the link
$(‘#top-link’).topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$(‘#top-link’).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});

{/code}

Como podemos perceber, é bem simples a implementação desta funcionalidade em nossos sites, a mesma ajuda e muito na navegabilidade de nossos visitantes, fazendo sentir-se mais confortável na navegação.

Gostou? Sabe de outra forma de fazer o “Ir para o topo” funcionar? Tem Alguma dúvida? Comenta aí!!!

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br