-1

Preciso "animar" um botão Scroll to top.

Ele já está perfeitamente formatado no CSS, e funciona (volta ao topo), o que realmente preciso é que ele não apareça quando a página é carregada, mas sim, somente após a página rolar alguns pixels para baixo.

exemplo do site: https://codigofonte.com.br

Desde já obrigado pela ajuda, sou iniciante.

<a id='icon-smoothscroll-top' class="icon-smoothscroll-top" href="#top" alt="Voltar ao topo" > <title>Voltar ao topo</title> </a>
  
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){

    $(window).scroll(function(){
        if ($(this).icon-smoothscroll-top() > 100) {
            $('#icon-smoothscroll-topp').fadeIn();
        } else {
            $('#icon-smoothscroll-top').fadeOut();
        }
    });

    $('#scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    }); 
});

</script>
@media (min-width: 992px){

    .icon-smoothscroll-top::before{
        font-family: icomoon; 
        content: '\e112';
         color: #ffffff;
         display: inline-block; 
         font-weight: 400; 
         font-size: 42px;
         border-radius: 33px;  
         background-color: #353535;
         position:fixed;
         text-align:center;
         opacity: .8;
         z-index:99;
         width:60px;
         height:60px; 
         line-height:44px;
         right:10px;
         bottom:50px;
         padding: 5px;
         text-decoration: none; 
         } 
          
     .icon-smoothscroll-top:hover::before {
         content: '\e112'; 
         color: #ffffff;  
         background-color: #000000;
         text-decoration: none;
     }
    
     .icon-smoothscroll-top a:hover::before{
        font-family: icomoon; 
        content: '\e112'; 
        color: #ffffff;
        text-decoration: none;
    } 
    }
1
  • Posso abrir o script dentro do html, ou devo chama-lo através do href?
    – Jean
    9/05/2019 às 15:50

2 Respostas 2

2

Utilize a função scrollTop do JQuery e verifique se o valor retornado é maior que número de pixels desejado.

$(document).ready(function() {

  $('#icon-smoothscroll-top').hide(); //Esconder o elemento após carregar o JQuery.

  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('#icon-smoothscroll-top').fadeIn();
    } else {
      $('#icon-smoothscroll-top').fadeOut();
    }
  });

  $('#scrollToTop').click(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 800);
    return false;
  });

});
div {
  width: 200px;
  height: 1000px;
}

#icon-smoothscroll-top {
  position: fixed;
  bottom: 20px;
  right: 10px;
  width: 100px;
  padding: 5px 5px;
  color: white;
  background-color: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a id="icon-smoothscroll-top">Voltar ao Topo</a>
</div>

9
  • Victor, meu código html está correto? Preciso fazer alguma alteração?
    – Jean
    9/05/2019 às 16:37
  • A princípio está sim @Jean. Não vejo nada de errado com o código HTML que vc postou aqui. Por que? A resposta que dei não resolveu o problema? 9/05/2019 às 17:34
  • Infelizmente não, ele continua aparecendo quando a página é carregada, estou abrindo a tag <script> logo abaixo do código html; Pode ser esse o erro?
    – Jean
    9/05/2019 às 17:59
  • Eu uso os 2 códigos que você forneceu? Posso colocar os 2 dentro da mesma tag <script>?
    – Jean
    9/05/2019 às 18:15
  • @Jean atualizei minha resposta para não te confundir. Antes do fechamento da tag </body> você adiciona o código javascript. Assim, você assegura que os elementos manipulados pelo js já foram carregados. 9/05/2019 às 18:31
-3

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
  • 1
    Isso é apenas código. O objetivo do site não é apenas resolver o problema específico, trata-se de ensinar o conceito de forma que com poucas modificações o usuário possa reaproveitar em outras situações. 13/03/2022 às 21:04

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 .