TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear un widget de desplazamiento hacia la parte superior para su sitio web?

26

Volver arriba o desplazarse hacia arriba es la función que le permite moverse a la parte superior de una página haciendo clic en una flecha que generalmente se encuentra cerca de la esquina inferior derecha de la página. No siempre es necesario utilizar la imagen para una función de desplazamiento hacia la parte superior. Dado que cada imagen envía una solicitud HTTP separada a su servidor, sumará el tiempo de carga general del sitio y personalizar la imagen tampoco es muy fácil. Para superar esto, ofrecemos el siguiente widget de desplazamiento a la parte superior con CSS y jQuery con un ícono impresionante de fuente en lugar de una imagen para que pueda personalizarlo para que se adapte al diseño de su sitio.

Relacionado: ¿Cómo agregar el widget de desplazamiento a la parte superior en el sitio de Weebly?

El widget contiene tres partes:

  • CSS
  • Texto
  • HTML

1 código CSS para el widget Volver al principio

A continuación se muestra el código CSS para el widget y péguelo dentro de la sección de encabezado de su sitio.

<style> .backtotop { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 55px; height: 60px; z-index: 100; display: none; text-decoration: none; color: #808080; } .backtotop i { font-size: 50px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Nota: En lugar de la imagen, usamos un ícono impresionante de fuente, por lo tanto, el CSS requerido está vinculado en consecuencia.

2 Script de jQuery para el widget

A continuación se muestra el script para el widget que debe colocarse en la sección de pie de página de su sitio.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.backtotop').css({'display': 'none'}); var offset = 200; var duration = 600; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $('.backtotop').fadeIn(duration); } else { $('.backtotop').fadeOut(duration); } }); $('.backtotop').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

3 HTML para el widget

Y finalmente, a continuación, se encuentra el código HTML que se colocará dentro del cuerpo de su página web para habilitar la función de volver al principio.

<a href="#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>

Personalización de las funciones de volver al principio

La ventaja de usar este widget es que puede personalizar la función completa según sus necesidades. Estas son algunas de las opciones de personalización para usted:

Velocidad de desplazamiento

La velocidad predeterminada del desplazamiento se establece en 600 en el script, que puede aumentar o disminuir.

Característica Código Donde mirar
Velocidad de desplazamiento var duración = 600; Texto

Posición de visualización del icono de desplazamiento

El icono de flecha comenzará a mostrarse cuando la barra de desplazamiento esté en la posición 200px desde la parte superior, que se define en el script con el siguiente código:

Característica Código Donde mirar
Posición de inicio del icono de desplazamiento fue compensado = 200; Texto

Puede cambiar la posición inicial según lo necesite.

Posición del icono

De forma predeterminada, el icono de flecha hacia arriba se mostrará 60px hacia arriba y 55px de distancia desde la esquina inferior derecha como se define en el estilo CSS. Puede cambiarlo en el método de prueba y error para verificar la posición adecuada para su sitio.

Característica Código Donde mirar
Posición del icono de desplazamiento en la esquina inferior derecha ancho: 55px; alto: 60px; Estilo

Estilo de icono

Usamos el impresionante icono de fuente "fa-arrow-circle-up" que puedes cambiar en el código HTML.

Característica Código Donde mirar
Volver al principio Estilo de icono <i class = “fa fa-arrow-circle-up”> </i> HTML

Consulte la sección de íconos direccionales de la lista de íconos impresionantes de fuentes para usar íconos alternativos para su sitio.

Tamaño de ícono

Se usa 50px predeterminado como tamaño de fuente para el icono en estilo CSS, que puede cambiar según sus necesidades.

Característica Código Donde mirar
Volver al principio Tamaño del icono tamaño de fuente: 50px; Estilo

Color del icono

Esta es la parte más importante de la personalización, donde el color del icono de fuente se puede cambiar fácilmente para adaptarse al diseño de su sitio. Busque el código "color: # 808080;" en el código CSS y cámbielo a cualquier color que necesite.

Característica Código Donde mirar
Volver al principio Color del icono color: # 808080; Estilo

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More