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

¿Cómo agregar el botón Desplazarse hacia arriba en el sitio de Weebly?

3

Desplazarse hacia arriba es una función sencilla y útil que se utiliza para ir a la parte superior de una página web desde abajo. Es posible que haya notado una marca de flecha hacia arriba en la esquina inferior derecha de la mayoría de los sitios y, al hacer clic en la imagen de la flecha, lo llevará a la parte superior de esa página. Esta es una característica útil especialmente para las páginas con contenido extenso. Este artículo explica cómo agregar la función de desplazamiento hacia arriba o hacia arriba en su sitio gratuito de Weebly. Obtenga más de 200 tutoriales gratuitos de Weebly para optimizar su sitio Weebly.

Aquí está el resumen de los pasos necesarios para agregar el botón de desplazamiento hacia arriba o hacia arriba:

  1. Descargue y modifique el archivo JavaScript de desplazamiento al principio.
  2. Descarga la imagen de la flecha hacia arriba.
  3. Sube el archivo JavaScript y de imagen a tu sitio Weebly.
  4. Agregar Desplazarse hacia arriba en todas las páginas.
  5. Agregue desplazamiento hacia la parte superior en páginas específicas.

Analicemos cada paso en detalle.

Paso 1: descargue y modifique el archivo de secuencia de comandos

  • Descargue el archivo zip y extráigalo a un archivo JavaScript llamado "scrolltopcontrol.js".
  • Abra el archivo en el editor como Bloc de notas o TextEdit y busque el código img src = "up.png”.
  • Reemplácelo con la ruta de la imagen de su sitio Weebly como se muestra a continuación:
img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"
  • Guarde el archivo modificado.

Paso 2: descarga de la imagen de la flecha hacia arriba

Paso 3: carga de archivos en su sitio Weebly

  • Inicie sesión en su cuenta de Weebly y seleccione el sitio al que desea agregar la función de desplazamiento hacia la parte superior.
  • En el editor de Weebly, vaya a la pestaña "Tema" y luego haga clic en el botón " Editar HTML / CSS ".
  • Haga clic en el icono "+" en la pestaña "Activos", seleccione "Cargar archivo (s) en el menú desplegable y cargue el archivo" scrolltopcontrol.js "modificado.
  • De la misma manera cargue el archivo de imagen “up_arrow.png”.
  • Guarde su tema, si es la primera vez que carga archivos en su sitio, se le pedirá que ingrese un nuevo nombre de tema para su sitio. Ingrese un nuevo nombre de tema y guarde sus cambios.

Ahora casi ha terminado y le quedan dos opciones para agregar la función de desplazamiento a la parte superior:

  1. Agregue todas las páginas del sitio.
  2. Solo en páginas específicas.

¿Cómo agregar el botón Desplazarse hacia arriba en el sitio de Weebly?

Carga de archivo en el sitio de Weebly

Paso 4: agregar Scroll to Top en todas las páginas

Copie el siguiente código y modifíquelo reemplazando "yoursitename.weebly.com" con el nombre real de su sitio Weebly.

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scrolltopcontrol.js"></script>

Vaya a la pestaña "Configuración" en el editor de Weebly y pegue el código en el cuadro "Código de encabezado" en la sección "SEO" como se muestra en la imagen de abajo.

¿Cómo agregar el botón Desplazarse hacia arriba en el sitio de Weebly?

Agregar código en la página de inicio del sitio Weebly

Guarde sus cambios y publique su sitio para ver un botón de flecha ubicado en la esquina inferior derecha cuando se desplaza hacia abajo. Puede ver la imagen de la flecha hacia arriba en todas sus páginas y hacer clic en la imagen lo llevará a la parte superior de su sitio.

Advertencia: Si la función de desplazamiento no funciona, intente pegar el código en la sección "Código de pie de página" en lugar de la sección "Código de encabezado".

Paso 5: agregar desplazamiento hacia la parte superior en páginas específicas

Vaya a la pestaña "Páginas" en el editor de Weebly y seleccione la página a la que desea agregar la función de desplazamiento a la parte superior. Haga clic en el enlace "Configuración avanzada" y pegue el código anterior en el cuadro " Código de encabezado " como se muestra en la imagen de abajo. Recuerde reemplazar "yoursitename.weebly.com" con el nombre real de su sitio Weebly.

¿Cómo agregar el botón Desplazarse hacia arriba en el sitio de Weebly?

Agregar código en una sola página de Weebly

Guarde los cambios y publique su sitio. Abra la página en particular y vea que el botón de flecha ahora está ubicado en la esquina inferior derecha de su página cuando se desplaza hacia abajo.

Usar el texto Volver al principio

Si desea utilizar texto en lugar de una imagen, simplemente agregue el siguiente código en cualquier lugar de su página utilizando un elemento " Código incrustado ".

<a href="#top">Back to Top</a>

También puede utilizar este código en el cuadro "Código de pie de página" en la sección "SEO" de la pestaña "Configuración" para agregar "Volver al principio" en el pie de página de su sitio. utilice las
etiquetas y para alinear el texto en consecuencia.

Nota: En lugar de #top, puede usar cualquier ancla HTML en su página para desplazarse a esa posición.

Cambio del destino de destino del control "Desplazarse hacia arriba"

Al hacer clic en la flecha hacia arriba, la barra de desplazamiento por defecto se moverá a la parte superior de la página. Si desea moverse a cualquier otra posición, puede controlarlo cambiando el atributo "scrollto" dentro del archivo .js. Por ejemplo, cambiar "scrollto: 0" a "scroll: 100" moverá la barra de desplazamiento 100 píxeles por debajo de la posición superior. También puede mover la posición a cualquier elemento definido en su página usando los siguientes dos pasos.

  • Paso 1 – Defina el elemento – Por ejemplo, para definir un elemento de código de inserción H2 use y agregue el siguiente código:
<h2 id="movehere">Move the Scroll bar here </h2>
  • Paso 2: luego cambie el atributo como scrollto: "movehere" dentro del archivo .js como se muestra a continuación:
setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

Esto moverá la barra de desplazamiento a esa posición de encabezado H2 cuando haga clic en la flecha hacia arriba o para volver al enlace superior.

Fuente de grabación: 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