Skip to main content
adicionou 125 caracteres ao conteúdo
Fonte Link
Leonardo Diego
  • 2,5mil
  • 1
  • 31
  • 51

O Botão

primeiroPrimeiro vamos criar o botão no aspx

<asp:HyperLink NavigateUrl="#" runat="server" cssClass="scrollToTop">Topo</asp:HyperLink>

Ou em html:

<a href="#" class="scrollToTop">Topo</a>

Aplicando CSS ao botão

.scrollToTop{    
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

E por fim, o jQuery:

$(document).ready(function(){
    
    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

JSFiddle DEMO

Traduzido da página do: Paul Underwood

O Botão

primeiro vamos criar o botão

<a href="#" class="scrollToTop">Topo</a>

Aplicando CSS ao botão

scrollToTop{    
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

E por fim, o jQuery:

$(document).ready(function(){
    
    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

JSFiddle DEMO

Traduzido da página do: Paul Underwood

O Botão

Primeiro vamos criar o botão no aspx

<asp:HyperLink NavigateUrl="#" runat="server" cssClass="scrollToTop">Topo</asp:HyperLink>

Ou em html:

<a href="#" class="scrollToTop">Topo</a>

Aplicando CSS ao botão

.scrollToTop{   
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

E por fim, o jQuery:

$(document).ready(function(){
    
    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

JSFiddle DEMO

Traduzido da página do: Paul Underwood

adicionou 74 caracteres ao conteúdo
Fonte Link
Leonardo Diego
  • 2,5mil
  • 1
  • 31
  • 51

O Botão

primeiro vamos criar o botão

<a href="#" class="scrollToTop">Topo</a>

Aplicando CSS ao botão

scrollToTop{    
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

E por fim, o jQuery:

$(document).ready(function(){
    
    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

JSFiddle DEMO

Traduzido da página do: Paul Underwood

O Botão

primeiro vamos criar o botão

<a href="#" class="scrollToTop">Topo</a>

Aplicando CSS ao botão

scrollToTop{    
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

E por fim, o jQuery:

$(document).ready(function(){
    
    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

Traduzido da página do: Paul Underwood

O Botão

primeiro vamos criar o botão

<a href="#" class="scrollToTop">Topo</a>

Aplicando CSS ao botão

scrollToTop{    
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

E por fim, o jQuery:

$(document).ready(function(){
    
    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

JSFiddle DEMO

Traduzido da página do: Paul Underwood

Fonte Link
Leonardo Diego
  • 2,5mil
  • 1
  • 31
  • 51

O Botão

primeiro vamos criar o botão

<a href="#" class="scrollToTop">Topo</a>

Aplicando CSS ao botão

scrollToTop{    
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

E por fim, o jQuery:

$(document).ready(function(){
    
    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

Traduzido da página do: Paul Underwood