Home-theater-designers
Se utiliza un botón de 'desplazamiento hacia arriba' para devolver su vista a la parte superior de la página fácilmente. Esta pequeña característica de UX es muy común en los sitios web modernos. Es particularmente útil para páginas web que tienen mucho contenido, como aplicaciones de una sola página.
En este artículo, aprenderá a crear un botón de desplazamiento hacia la parte superior utilizando JavaScript y jQuery.
Cómo crear un botón de desplazamiento hacia la parte superior usando JavaScript
Puede agregar un botón de desplazamiento hacia la parte superior a su sitio web con el siguiente fragmento de código:
cómo ver mensajes de texto antiguos
código HTML
|_+_|Aquí, se crea una estructura básica de la página web con datos ficticios. Solo necesita enfocarse en el botón de desplazamiento hacia arriba.
|_+_|Cuando se hace clic en este botón, la página se desplaza hacia la parte superior. Esto será funcional después de agregar el código jQuery.
Código jQuery
Relacionado: Aprenda a crear un elemento en jQuery
|_+_|Aquí el show La clase se agrega al elemento de botón si el usuario se desplaza más de 300 píxeles en la página web. Esta show class hace que el elemento de botón sea visible. De forma predeterminada, la visibilidad del elemento de botón se mantiene oculta. Más detalles sobre el botón se encuentran en el siguiente código CSS.
Código CSS
Relacionado: Ejemplos de código CSS simple que puede aprender en 10 minutos
|_+_|El CSS anterior se utiliza para diseñar el botón de desplazamiento hacia la parte superior y la página web. Puede jugar con el código CSS y diseñar el botón de acuerdo con sus requisitos.
Ahora tiene un botón de desplazamiento hacia arriba / atrás completamente funcional. Si desea ver el código fuente completo utilizado en este artículo, aquí está el Repositorio de GitHub de lo mismo.
Nota : El código utilizado en este artículo es Con licencia del MIT .
Más información sobre la experiencia del usuario
La experiencia del usuario se centra en si un producto satisface las necesidades de sus usuarios. Si eres diseñador o desarrollador, harías bien en seguir los principios de diseño de UX y crear productos increíbles. Si este campo le interesa, debe seguir la ruta correcta para comenzar.
cuánto dura un macbook airCuota Cuota Pío Correo electrónico ¿Quieres ser diseñador de UX? He aquí cómo empezar
El trabajo del diseñador de UX es asegurarse de que se atiendan las necesidades del usuario del software y que estén encantados con el proceso.
Leer siguiente Temas relacionados- Programación
- JavaScript
- jQuery
Yuvraj es estudiante de licenciatura en Ciencias de la Computación en la Universidad de Delhi, India. Le apasiona el desarrollo web Full Stack. Cuando no está escribiendo, está explorando la profundidad de diferentes tecnologías.
Más de Yuvraj ChandraSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse