Como escrever
【1】 ponto de ancoragem
Usar links de âncora é um retorno simples ao topo. Essa implementação coloca principalmente um link de âncora com um nome especificado na parte superior da página e, em seguida, coloca um link para retornar à âncora abaixo da página. O usuário clica no link para retornar à posição superior onde a âncora está localizada.
[Nota] Informações detalhadas sobre pontos de ancoragem serão movidas aqui
<body style = "altura: 2000px;"> <div id = "topanchor"> </div> <a href = "#topanchor" style = "posição: corrigido; direita: 0; inferior: 0"> de volta ao topo </a> </body>
【2】 Scrolltop
A propriedade Scrolltop indica o número de pixels escondidos acima da área de conteúdo. Quando o elemento não é rolado, o valor do scrolltop é 0. Se o elemento for rolado verticalmente, o valor do scrolltop será maior que 0 e indica a largura do pixel do conteúdo invisível acima do elemento.
Como o scrolltop é gravável, o scrolltop pode ser usado para alcançar a função de volta ao topo
[Nota] Detalhes dos problemas de compatibilidade do scrolltop na página são movidos aqui
<Body style = "Hight: 2000px;"> <botão id = "test" style = "position: corrigido; direita: 0; inferior: 0"> de volta ao topo </botão> <cript> test.onclick = function () {document.body.scrolltop = document.documentElement.scrolltop = 0;} </script>【3】 Scrollto ()
O método scrollTo (x, y) rola o documento exibido na janela atual, para que os pontos especificados pelas coordenadas x e y no documento estejam localizados no canto superior esquerdo da área de exibição.
Defina o Scrollto (0,0) para alcançar o efeito de retornar ao topo
<body style = "altura: 2000px;"> <button id = "test" style = "position: corrigido; direita: 0; inferior: 0"> de volta ao topo </button> <cript> test.onclick = function () {scrollto (0,0);} </script> </body>【4】 scrollby ()
O método scrollby (x, y) rola o documento exibido na janela atual, x e y especificam a quantidade relativa de rolagem
Basta usar o comprimento de rolagem da página atual como um parâmetro e rolar ao contrário, você pode alcançar o efeito de retornar ao topo.
<body style = "altura: 2000px;"> <button id = "test" style = "position: corrigido; direita: 0; inferior: 0"> de volta ao topo </button> <cript> test.onclick = function () {var top = document.body.scrolltoptop || Document.DocumentElement.ScrolltopsCrollby (0, -top);} </sCript> </body>【5】 ScrollIntoView ()
Método element.ScrollIntoView rola o elemento atual e entra na área visível do navegador.
Este método pode aceitar um valor booleano como um parâmetro. Se verdadeiro, significa que a parte superior do elemento está alinhada com a parte superior da parte visível da área atual (desde que a área atual seja rolável); Se falso, significa que a parte inferior do elemento está alinhada com a cauda da parte visível da área atual (desde que a área atual seja rolável). Se este parâmetro não for fornecido, o padrão será verdadeiro
O princípio de usar esse método é semelhante ao princípio do uso de pontos de ancoragem. Defina o elemento de destino na parte superior da página. Quando a página rola, o elemento de destino é rolar fora da área da página. Clique no botão de volta ao topo para retornar à posição original e alcançar o efeito esperado.
<Body style = "Height: 2000px;"> <div id = "Target"> </div> <botão id = "test" style = "position: corrigido; direita: 0; inferior: 0"> de volta ao topo </button> <cript> test.onclick = function () {Target.ScrollIntoView ();} </script> </body)Aprimorado
O seguinte aprimora a função de volta ao topo
【1】 Mostrar aprimoramento
Use CSS para desenhar e transformar
Use efeitos de pseudo-elemento CSS e pseudo-pus. Quando o mouse se move para o elemento, o texto de volta para a parte superior é exibido e não é exibido quando movido.
<Toy> .Box {Position: corrigido; direita: 10px; inferior: 10px; altura: 30px; largura: 50px; text-align: Center; preenchimento: 20px; Background-Color: LightBlue; Radio de fronteira: 20%; Overflow: Hidden;}. Caixa: Passe o mouse: antes de {topo: 50%}. Caixa: Round. 40px; cor: Peru; peso da fonte: negrito;} .Box-in {Visibility: visível; exibição: Block inline; altura: 20px; largura: 20px; borda: 3px Solid Black; cor de borda: Divro transparente branco: 2000; id = "Box"> <div> </div> </div> </body>【2】 Aprimoramento da animação
Para adicionar animação ao topo, a barra de rolagem volta ao topo a uma certa velocidade
Existem dois tipos de animações: uma é a animação CSS, que requer mudanças de estilo e transição; O outro é a animação JavaScript, que usa um cronômetro para implementá -la.
Nas 5 implementações acima, os métodos ScrollTop, ScrollTo () e Scrollby () podem adicionar animações e, como não há mudança de estilo, apenas as animações JavaScript podem ser adicionadas
O temporizador pode ser usado, setInterval, setTimeout e requestanimationFrame. O seguinte é usar o timer de melhor desempenho requestanimationframe para implementá-lo.
[Nota] O navegador IE9 não suporta esse método, você pode usar o setTimeout para compatibilidade
1. Adicione o efeito de animação Scrolltop
Usando um cronômetro, reduza o valor da rolltop em 50 de cada vez até que seja reduzido para 0, e a animação é concluída
<Cript> var Timer = null; box.OnClick = function () {cancelanImationFrame (Timer); Timer = requestanimationframe (function fn () {var otop = document.body.ScrollTop || document.documentElement.scrolltop; if (otop> 0) { - 50; Timer = requestanimationframe (fn);} else {cancelanimationframe (timer);}});} </sCript>2. Adicione o efeito de animação scrollto ()
Obtenha o parâmetro y no scrollto (x, y) através do valor do scrolltop, reduza -o em 50 de cada vez até que seja reduzido para 0, e a animação é concluída
<Cript> var timer = null; box.OnClick = function () {cancelanimationframe (timer); timer = requestanimationframe (function fn () {var otop = document.body.scrolltop || document.documentElement.scroltop; if (otop> 0) {ScrollTo ( requestanimationframe (fn);} else {cancelanimationframe (timer);}});} </script>3. Adicione o efeito de animação scrollby ()
Defina o parâmetro y em scrollby (x, y) para -50 até que o scrolltop seja 0, então a reversão para
<SCRIPT> var timer = null; box.OnClick = function () {cancelanimationframe (timer); timer = requestanimationframe (function fn () {var otop = document.body.scrolltop || document.documentElement.scroltop; if (otop> 0) {scrust requestanimationframe (fn);} else {cancelanimationframe (timer);}});} </script>concluir
Desde que os métodos ScrollTop, scrollby () e scrollto () usam se o valor do scrollTop é reduzido a 0 como uma referência para a parada de animação, e os princípios e implementações das três animações são basicamente semelhantes e o desempenho também é semelhante. Finalmente, o efeito de aprimoramento da animação é alcançado com o atributo Scrolltop mais usado
Obviamente, se você acha que a velocidade de 50 não é adequada, você pode ajustá -lo de acordo com a situação real
<Toy> .Box {Position: corrigido; direita: 10px; inferior: 10px; altura: 30px; largura: 50px; text-align: Center; preenchimento: 20px; Background-Color: LightBlue; Radio de fronteira: 20%; Overflow: Hidden;}. Caixa: Passe o mouse: antes de {topo: 50%}. Caixa: Round. 40px; cor: Peru; peso da fonte: negrito;} .Box-in {Visibility: visível; exibição: Block inline; altura: 20px; largura: 20px; borda: 3px Solid Black; cor de borda: Divro transparente branco: 2000; id="box"><div></div></div> </body><script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0) {document.body.scrolltop = document.documentElement.Scrolltop = OTOP - 50; Timer = requestanimationFrame (fn);} else {cancelanimationFrame (Timer);}});} </sCript>O exposto acima é a descrição completa dos cinco métodos de escrita (da implementação ao aprimoramento) com base na implementação do JS, que eu apresentei a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a tempo. Muito obrigado pelo seu apoio ao site wulin.com!