13

Preciso ter um ícone fixo na página no canto direito em baixo da tela. Ao clicar nesse ícone ele volta para o inicio da página, fazendo o Scroll rolar até o topo da página.

Alguém poderia me ajudar? Sou iniciante e tenho dificuldade em fazer isso.

Link de um site que faz o mesmo.

http://designgeekz.com/20-best-jquery-plugins-for-2014/

5
  • 1
    <a href="#">link</a>
    – bfavaretto
    Commented 28/08/2014 às 18:22
  • 1
    Isso não faz load, só rola (pula) para o topo.
    – bfavaretto
    Commented 28/08/2014 às 18:28
  • Ou, via jQuery - $('html,body').scrollTop(0);. Em JavaScript puro seria scroll(0,0);.
    – OnoSendai
    Commented 28/08/2014 às 18:32
  • Muito obrigado pela ajuda na outra pergunta @Marconi, com as respostas da sua pergunta conseguí resolver meu problema. +1 ;)
    – Tiago P.C
    Commented 2/12/2015 às 11:14
  • @TiagoP.C tranquilo.
    – Marconi
    Commented 2/12/2015 às 11:15

4 Respostas 4

10

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

3
  • jQuery para arrastar a página ao topo? Não estamos matando uma mosca com um tiro de canhão?
    – Gustavo
    Commented 28/08/2014 às 18:43
  • @user6492 Se for uma biblioteca que o projeto original já utiliza, não vejo porque não.
    – OnoSendai
    Commented 28/08/2014 às 20:30
  • @Marconi, como assim piscando? Commented 4/09/2014 às 13:55
10

O jeito mais fácil é sem script/animação alguma - ao contrário deste link que você deu de exemplo.

Logo após o <body>, inclua uma pequena âncora:

<body>
    <a id="topo"></a>
    ...

Então, inclua a marcação do botão:

    <a href="#topo"><div id="botao_topo"><img src="img" /></div></a>

Para finalizar, basta aplicar o CSS do botão. Um exemplo está abaixo:

#botao_topo {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 999;
}

Edit: preparei um JSFiddle com pequenas melhorias possíveis. Caso queiram aplicá-las, é necessário adicionar um &nbsp; à âncora.

1
  • Tranquilo, @Marconi :) Quanto mais opções de resposta tiver por aqui, melhor, porque a ideia do site é ajudar não só você, como também todos os demais que venham a ver sua pergunta, mais tarde! (Por isso o feedback é bem importante, também!) Commented 28/08/2014 às 18:41
3

Conforme apresentado no link a seguir http://jsfiddle.net/z3w0sbxr/ solução com jQuery, mas como você deseja usar? Com jquery, com html puro sem efeito algum? ... Segue meu exemplo com jQuery.

<!-- Parte HTML -->
<div style="">
    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
    </div>
    <div id="go-to-top" style="position:fixed; bottom:0; right:0">
        <a href="#">TOP</a>
    </div>

/* Código jQuery */
$('#go-to-top').each(function(){
    $(this).click(function(e){ 
        e.preventDefault();
        $('html,body').animate({ scrollTop: 0 }, 'slow');
        return false; 
    });
});
0
-2

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script src="./script.js"></script>
  </body>
</html>

JS:

/* Create the div on the main screen and add the elements and show it on the screen */
let divEl = document.createElement('div')
divEl.classList.add('scrollButtton')
divEl.addEventListener('click', topScreen)
document.querySelector('body').appendChild(divEl)

/* Up to top the page */
function topScreen() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

/* Show or hide button on screen */
function scrollButton() {
  if (window.scrollY === 0) {
    /* Hide button */
    document.querySelector('.scrollButtton').style.display = 'none'
  } else {
    /* show button */
    document.querySelector('.scrollButtton').style.display = 'block'
  }
}

/* Monitor page scroll */
window.addEventListener('scroll', scrollButton)

CSS:

.scrollButtton {
  display: none;
}

.scrollButtton:before {
  content: '⬆';
  color: #fff;
  font: normal 40px 'dashicons';
  -webkit-font-smoothing: antialiased;

  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 10%;
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  z-index: 999;

  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  min-height: 1200px;
}
Para mais detalhes, pode acessar o repositorio no github:
https://github.com/TayseRosa/toTop/
1
  • 4
    Mesma observação da outra resposta, isso não ajuda em nada. Pense no seguinte, a pergunta deve ser escrita como um manual técnico onde ensina o leitor a replicar uma condição ou situação de erro. A resposta também ser escrita como um manual técnico onde ensina o leitor a replicar as condições de solução do problema enunciado na pergunta. Commented 13/03/2022 às 21:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .