Home-theater-designers
Um botão 'rolar para cima' é usado para retornar sua visualização ao topo da página facilmente. Esse pequeno recurso de UX é muito comum em sites modernos. É particularmente útil para páginas da web com muito conteúdo, como aplicativos de uma única página.
filmes grátis que posso assistir no meu telefone
Neste artigo, você aprenderá a criar um botão de rolagem para cima usando JavaScript e jQuery.
Como criar um botão Scroll-to-Top usando JavaScript
Você pode adicionar um botão de rolagem para cima ao seu site usando o seguinte snippet de código:
Código HTML
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Aqui, uma estrutura básica da página da web é criada com dados fictícios. Você só precisa se concentrar no botão de rolagem para cima.
Quando este botão é clicado, a página é rolada para o topo. Isso estará funcional após adicionar o código jQuery.
Código jQuery
Relacionado: Aprenda a criar um elemento em jQuery
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});Aqui o exposição a classe é adicionada ao elemento de botão se o usuário rolar mais de 300 pixels na página da web. Esse exposição classe torna o elemento do botão visível. Por padrão, a visibilidade do elemento do botão é mantida oculta. Mais detalhes sobre o botão estão no código CSS a seguir.
Código CSS
Relacionado: Exemplos de código CSS simples que você pode aprender em 10 minutos
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}O CSS acima é usado para definir o estilo do botão de rolagem para cima e da página da web. Você pode brincar com o código CSS e definir o estilo do botão de acordo com seus requisitos.
Agora você tem um botão scroll-to-top / back-to-top totalmente funcional. Se você quiser dar uma olhada no código-fonte completo usado neste artigo, aqui está o Repositório GitHub do mesmo.
Observação : O código usado neste artigo é Licenciado MIT .
Saiba mais sobre a experiência do usuário
A experiência do usuário se concentra em saber se um produto atende às necessidades de seus usuários. Se você é um designer ou desenvolvedor, faria bem em seguir os princípios de design UX e criar produtos incríveis. Se este campo é do seu interesse, você deve seguir o caminho correto para começar.
como carregar seu telefone mais rápidoCompartilhado Compartilhado Tweet O email Quer ser um UX Designer? Veja como começar
É trabalho do UX Designer garantir que as necessidades do usuário do software sejam atendidas e que eles fiquem satisfeitos com o processo.
Leia a seguir Tópicos relacionados- Programação
- JavaScript
- jQuery
Yuvraj é estudante de graduação em Ciência da Computação na Universidade de Delhi, na Índia. Ele é apaixonado por Full Stack Web Development. Quando não está escrevendo, ele está explorando a profundidade de diferentes tecnologias.
Mais de Yuvraj ChandraAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever