Explicação detalhada de três maneiras de alcançar a função de rolar suavemente a página até o topo

Recentemente, a conta pública H5 da incorporadora passou a ter a função de rolar até o topo clicando no ícone. A função é relativamente simples de implementar. Basta chamar window.scrollTo(0, 0) diretamente e concluí-la em uma linha de código. Mas, como um leão de cerco, como eu poderia ter requisitos tão baixos para mim, então adicionei um requisito para realizar a função de rolar suavemente a página até o topo. Após pesquisar e revisar documentos, temos as três opções a seguir.

O mais alto nível de funcionalidade pode ser alcançado usando apenas CSS. O código é o seguinte:

 html {comportamento de rolagem: suave;}

A função deste estilo é especificar um comportamento de rolagem para elementos com barras de rolagem, mas ele só entra em vigor quando o usuário navega manualmente ou a API de rolagem CSSOM aciona a rolagem e não afeta a rolagem causada pelo comportamento do usuário. Justamente quando estava comemorando, abri posso usar e verifiquei a compatibilidade:

Droga, vamos implementá-lo com JS.

Todos nós sabemos que window.scrollTo(x, y) realiza a função de rolar para uma determinada posição na página, passando as coordenadas dos eixos xey no documento. Na verdade, esta API também pode passar uma opção, que é um objeto. O valor da esquerda corresponde ao x nas coordenadas, o topo corresponde ao y nas coordenadas, e há também um valor de comportamento, que permite. para personalizar o comportamento de rolagem. Em seguida, implementamos a rolagem assim:

 window.scrollTo({esquerda: 0, topo: 0, comportamento: 'suave'})

Cheira tão bem, pronto. Poucos dias depois, o gerente de produto veio até mim com uma espada de 5 metros e disse que o efeito de rolagem no Safari era estranho e o exame físico era extremamente ruim. Então abri silenciosamente o documento MDN e rolei até o final:

Vendo esta imagem, embora o navegador API seja quase compatível, a opção option trava diretamente no Safari, então abri o stackoverflow novamente e resumi a solução final.

Muitas vezes vejo o famoso requestAnimationFrame, mas nunca tive a oportunidade de usá-lo. Desta vez, posso experimentá-lo. Sabemos que a função de requestAnimationFrame é dizer ao navegador para executar a função de retorno de chamada antes do próximo redesenho. Esse comportamento é feito automaticamente pelo navegador para você. Então temos o seguinte código:

 const scrollToTop = () => { let scrollTop = document.documentElement.scrollTo || document.body.scrollTop if (scrollTop > 0) { window.requestAnimationFrame(scrollTop) window.scrollTop(0, scrollTop - scrollTo / 8) }}

Feito! ! ! Perfeito! ! ! Embora animado, ativei posso usar para verificar a compatibilidade de requestAnimationFrame:

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.