Cómo añadir un efecto de ' desplazamiento suave ' en Shopify

¿Alguna vez necesitas tener un botón o un enlace con un desplazamiento automático suave a otro lugar en la página?

Puede que sepas que puedes usar un Marcador ' enlace ancla ' para saltar hacia abajo, pero a veces esto no es muy suave si se trata de un movimiento rápido, y puede ser confuso para sus clientes.

Así que aquí hay un pequeño tutorial rápido sobre cómo añadir un desplazamiento suave a una página en su tienda Shopify.

Haga clic aquí para ver un ejemplo: shortcodesforshopify.myshopify.com/pages/smooth-scroll-down-example

Paso 1: Escribe tu contenido. Por ejemplo, puede tener un encabezado, algunos párrafos y, a continuación, un vínculo o un botón desde el que desea desplazarse suavemente hacia abajo. Establece todo eso primero.

Paso 2: A continuación, busque el vínculo desde el que desea desplazarse. Por ejemplo, podría ser una imagen o un vínculo. Añade una etiqueta ancla, pero en lugar de vincularla a otra página, usa el hashtag para desplazarte a un ancla en la misma página. Así:

<a href="#scroll-here">CLICK THIS LINK TO SCROLL</a>

Paso 3: Busca el lugar al que quieres desplazarte. Esto podría ser una nueva sección, por ejemplo. Al hacer clic en el botón o vínculo que creó en el paso 1, debería desplazarse aquí. Voltea al modo HTML de nuevo, y añade un ancla con el atributo ' name ', así:

<a name="scroll-here">HERE IS WHERE WE WILL SCROLL TO</a>

Paso 4: Por último, aún en la vista HTML, agrega este código a la parte inferior de tu página:

<script>// <![CDATA[
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
// ]]></script>

Nota: Este código se toma prestado de los comentarios del tutorial de CSS Tricks de Devin, como se ve aquí: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Entonces guarda. Ahora que esto está configurado, cualquier enlace de anclaje en la misma página tendrá un desplazamiento suave.

Haga clic aquí para ver un ejemplo: shortcodesforshopify.myshopify.com/pages/smooth-scroll-down-example

¿Tienes preguntas u otro truco genial que quieras compartir? ¡ Suéltelos en los comentarios!

Gracias de nuevo por mantenerse al día con nuestro Shopify Insider blog @ Blackbelt Commerce. Por favor, asegúrese de revisar nuestra Productos. También tenemos algunas recomendaciones principales del blog para que usted Compruebe hacia fuera; Cómo vincular comentarios en Shopify Blog Posts,  Cómo hacer una copia de respaldo de su tienda Shopify, an overview of e-commerce regulations, how much does it cost to hire a shopify expert?, Y Shortcodes para Shopify. Como siempre, vigila las nuevas publicaciones del blog.

¿Cuáles son las principales tiendas de Shopify?

Toma lo que aprendimos y utilíla para tu ventaja.
Obtenga nuestra investigación exclusiva: Insights de más de 500 tiendas Shopify.

Impulsado por ConvertKit

15 responses to “Cómo añadir un efecto de ' desplazamiento suave ' en Shopify

  1. <b class="fn"><a href='https://www.masteringthemix.com' rel='external nofollow ugc' class='url'>Tom Frampton</a></b> Dice:

    Hola Tristan,

    Gracias por su tutorial! Estoy tan cerca de que ser perfecto... Simplemente no consigo que la página se desplace suavemente. Simplemente salta al lugar correcto. Me encantaría que el desplazamiento...

    Aquí está la página... https://www.masteringthemix.com/pages/mixing-with-levels

    ¿Algún consejo?

    Gracias

    Tom.

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola Tom! Parece estar trabajando muy bien en mi extremo, se desplaza hacia abajo de una manera agradable... ¿no te sucede eso? 🙂

  2. Oye

    Esto funciona perfecto, pero ¿es posible configurar esto en un sitio de varias páginas? Sólo funciona en una página, y al hacer clic en cualquiera de estos enlaces en la navegación de una página diferente en el sitio web no hace nada!

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola David! Gracias por leer, contento de que está funcionando bien en su sitio 🙂 como para configurarla a través de un sitio de varias páginas — eso es algo que podríamos necesitar para echar un vistazo más profundo en un mini-proyecto personalizado, ya que realmente depende de su sitio 🙂 siéntase libre de contactarnos en el enlace de abajo y HAP py para ver si podemos ayudar > https://www.blackbeltcommerce.com/contact/

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola Sam! Gracias por leer. Desafortunadamente, este es un poco más complejo de lo que podemos hacer aquí, pero si desea algo de ayuda no dude en ponerse en contacto con nosotros y podemos ser capaces de ayudar como un mini-proyecto 🙂 Hope que ayuda, sólo hazme saber si tienes alguna otra pregunta.
      Gracias
      Tristan.

  3. Hola, gran tutorial. Funciona muy bien y hace que mi sitio de una sola página mucho mejor.
    Una cosa, sin embargo, estoy usando el tema de Brooklyn que tiene una barra de menú de la izquierda en el móvil (en contraposición a su menú móvil superior). Desde una perspectiva de usabilidad, sería bueno tener el menú cerca antes de que se produzca el desplazamiento. De lo contrario, no verá ninguna animación de desplazamiento y el menú seguirá en la parte superior. ¿Esto requiere una línea extra en el JavaScript? ¿Alguna idea?

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola Chris! Gracias por su lectura, suena como si en su mayoría funciona bien. Desafortunadamente, este es un poco más complejo de lo que podemos hacer aquí, pero si desea algo de ayuda no dude en ponerse en contacto con nosotros y podemos ser capaces de ayudar como un mini-proyecto 🙂 Hope que ayuda, sólo hazme saber si tienes alguna otra pregunta.
      Gracias
      Tristan.

  4. Para varios sitios añadir a la cabecera antes de la cabeza del tema líquido.

    $(function() { $(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’); if (target.length) { $(‘html,body’).animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

  5. Hola Tristan,
    Gracias por el tutorial que fue extremadamente útil. Sin embargo, no he podido obtener el posicionamiento de anclaje preciso. Eg. Si hace clic en una de las últimas 2 preguntas en mi FAQ que le llevará a la primera respuesta no los últimos 2. Por favor, echa un vistazo y hazme saber dónde estoy yendo mal.

Añadir comentario

Su dirección de correo electrónico no se publicará. Los campos obligatorios se marcan *

Este sitio utiliza Akismet para reducir el spam. Obtén información sobre cómo se procesan los datos de tus comentarios.

;

Comentarios 15

  1. <b class="fn"><a href='https://www.masteringthemix.com' rel='external nofollow ugc' class='url'>Tom Frampton</a></b> Dice:

    Hola Tristan,

    Gracias por su tutorial! Estoy tan cerca de que ser perfecto... Simplemente no consigo que la página se desplace suavemente. Simplemente salta al lugar correcto. Me encantaría que el desplazamiento...

    Aquí está la página... https://www.masteringthemix.com/pages/mixing-with-levels

    ¿Algún consejo?

    Gracias

    Tom.

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola Tom! Parece estar trabajando muy bien en mi extremo, se desplaza hacia abajo de una manera agradable... ¿no te sucede eso? 🙂

  2. Oye

    Esto funciona perfecto, pero ¿es posible configurar esto en un sitio de varias páginas? Sólo funciona en una página, y al hacer clic en cualquiera de estos enlaces en la navegación de una página diferente en el sitio web no hace nada!

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola David! Gracias por leer, contento de que está funcionando bien en su sitio 🙂 como para configurarla a través de un sitio de varias páginas — eso es algo que podríamos necesitar para echar un vistazo más profundo en un mini-proyecto personalizado, ya que realmente depende de su sitio 🙂 siéntase libre de contactarnos en el enlace de abajo y HAP py para ver si podemos ayudar > https://www.blackbeltcommerce.com/contact/

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola Sam! Gracias por leer. Desafortunadamente, este es un poco más complejo de lo que podemos hacer aquí, pero si desea algo de ayuda no dude en ponerse en contacto con nosotros y podemos ser capaces de ayudar como un mini-proyecto 🙂 Hope que ayuda, sólo hazme saber si tienes alguna otra pregunta.
      Gracias
      Tristan.

  3. Hola, gran tutorial. Funciona muy bien y hace que mi sitio de una sola página mucho mejor.
    Una cosa, sin embargo, estoy usando el tema de Brooklyn que tiene una barra de menú de la izquierda en el móvil (en contraposición a su menú móvil superior). Desde una perspectiva de usabilidad, sería bueno tener el menú cerca antes de que se produzca el desplazamiento. De lo contrario, no verá ninguna animación de desplazamiento y el menú seguirá en la parte superior. ¿Esto requiere una línea extra en el JavaScript? ¿Alguna idea?

    1. <b class="fn"><a href='https://www.blackbeltcommerce.com' rel='external nofollow ugc' class='url'>Tristan King</a></b> Dice:

      ¡ Hola Chris! Gracias por su lectura, suena como si en su mayoría funciona bien. Desafortunadamente, este es un poco más complejo de lo que podemos hacer aquí, pero si desea algo de ayuda no dude en ponerse en contacto con nosotros y podemos ser capaces de ayudar como un mini-proyecto 🙂 Hope que ayuda, sólo hazme saber si tienes alguna otra pregunta.
      Gracias
      Tristan.

  4. Para varios sitios añadir a la cabecera antes de la cabeza del tema líquido.

    $(function() { $(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’); if (target.length) { $(‘html,body’).animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

  5. Hola Tristan,
    Gracias por el tutorial que fue extremadamente útil. Sin embargo, no he podido obtener el posicionamiento de anclaje preciso. Eg. Si hace clic en una de las últimas 2 preguntas en mi FAQ que le llevará a la primera respuesta no los últimos 2. Por favor, echa un vistazo y hazme saber dónde estoy yendo mal.

Añadir comentario

Su dirección de correo electrónico no se publicará. Los campos obligatorios se marcan *

Este sitio utiliza Akismet para reducir el spam. Obtén información sobre cómo se procesan los datos de tus comentarios.