Explicación detallada de tres formas de lograr la función de desplazarse suavemente por la página hacia la parte superior

Recientemente, la cuenta pública H5 de la empresa de desarrollo tiene la función de hacer clic en el icono para desplazarse hacia la parte superior. La función es relativamente sencilla de implementar. Simplemente llame a window.scrollTo(0, 0) directamente y complétela en una línea de código. Pero como león de asedio, ¿cómo podría tener requisitos tan bajos para mí? Así que agregué un requisito para realizar la función de desplazarme suavemente por la página hacia la parte superior. Después de investigar y revisar documentos, tenemos las siguientes tres opciones.

El nivel más alto de funcionalidad se puede lograr utilizando únicamente CSS. El código es el siguiente:

 html {comportamiento de desplazamiento: suave;}

La función de este estilo es especificar un comportamiento de desplazamiento para elementos con barras de desplazamiento, pero solo tiene efecto cuando el usuario navega manualmente o la API de desplazamiento CSSOM activa el desplazamiento, y no afecta el desplazamiento causado por el comportamiento del usuario. Justo cuando estaba celebrando, abrí ¿Puedo usar y verifiqué la compatibilidad?

Maldita sea, implementémoslo con JS.

Todos sabemos que window.scrollTo (x, y) realiza la función de desplazarse a una determinada posición en la página pasando las coordenadas de los ejes xey en el documento. Esta API en realidad puede pasar una opción, que es un objeto. El valor izquierdo corresponde a la x en las coordenadas, el superior corresponde a la y en las coordenadas y también hay un valor de comportamiento, que le permite personalizar el. comportamiento de desplazamiento. Luego implementamos el desplazamiento de esta manera.

 window.scrollTo({ izquierda: 0, arriba: 0, comportamiento: 'suave'})

Huele muy bien, listo. Unos días más tarde, el gerente de producto vino a verme con una espada de 5 metros y me dijo que el efecto de desplazamiento en Safari era extraño y que el examen físico era extremadamente deficiente. Así que abrí silenciosamente el documento MDN y me desplacé hasta el final:

Al ver esta imagen, aunque casi todos los navegadores API la admiten, la opción de opción cuelga directamente en Safari, así que abrí stackoverflow nuevamente y resumí la solución definitiva.

A menudo veo el famoso requestAnimationFrame, pero nunca tengo la oportunidad de usarlo. Esta vez puedo probarlo. Sabemos que la función de requestAnimationFrame es indicarle al navegador que ejecute la función de devolución de llamada pasada antes del próximo rediseño. Este comportamiento lo realiza automáticamente el navegador. Entonces tenemos el siguiente código:

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

¡Hecho! ! ! ¡Perfecto! ! ! Mientras estaba emocionado, activé ¿Puedo usar para verificar la compatibilidad de requestAnimationFrame?

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.