Topo em bootstrap 4

Front-end
#1

como implementar isso na minha aplicação bootstrap 4
image

Você está no final da página inicial por exemplo, clicando nesse botão, ele volta para o início (topo) da página.

1 curtida
#2

Da uma olhada nesse tópico, talvez ele te ajude

1 curtida
#3

Você pode usar isso, utilizando JQuery.

Primeiro cria o botão no html

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

Segundo aplica CSS no botão

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

Terceiro, vocẽ utiliza 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;
    });

});
1 curtida
#4

Vou deixar uma solução aqui, complementar a do @Mike e @vanderm.

Não é uma solução Bootstrap, mas funciona em documentos HTML. Pode ser que não funcione em todas as versões de navegadores, contudo, funciona nos mais conhecidos (Chrome e Firefox).

Ela utiliza apenas HTML e, caso deseje um efeito scroll mais suave, também CSS. Uso no meu site e me atende bem. :wink:

01 - Definindo para onde apontar

No seu caso, você escolheu o topo, mas poderia ser outra seção. Então, criamos um id no elemento HTML para o qual queremos apontar. Exemplo:

<nav id="topo">
  <!-- Conteúdo do menu de navegação -->
</nav>

02 - Depois, criamos um botão ou link para o acesso ao id="topo"

Nesse link, no lugar de colocar apenas a #, no href="", colocamos ela mais o nome do id para onde queremos apontar. Exemplo:

<a href="#topo">
      voltar ao topo
</a>

03 - Se quisermos um efeito de deslizamento suave, podemos fazer algo com CSS

No arquivo CSS ou na tag <style></style>, podemos utilizar a propriedade scroll-behavior, dentro do elemento html{ }, para definirmos que tipo de comportamento queremos. Aqui coloquei smooth, mas você pode saber mais sobre ele e outros comportamentos aqui. Exemplo de uso:

html{
     scroll-behavior: smooth;
}

Saiba mais sobre esse efeito, dando uma olhadinha nesse tutorial da W3C. Ali também apresenta uma opção Cross-browser com JavaScript e jQuery.

2 curtidas
#5

@vanribeiro Perfeito!

1 curtida