¿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.
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.
¡ Hola Tom! Parece estar trabajando muy bien en mi extremo, se desplaza hacia abajo de una manera agradable... ¿no te sucede eso? 🙂
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!
¡ 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/
Oye
He intentado agregar el script al tema. Liquid e index. Liquid (que es la página en la que está el botón).... esto no tiene suerte con la suavidad...
https://gorilla-socks.myshopify.com
Salud
¡ 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.
Oye Sam, ¿encontraste una solución a esto? Me estoy quedando con el mismo problema.
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?
¡ 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.
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; } } }); });
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.
Hola, gracias por tu mensaje. Para solucionarlo, es probable que necesitemos echar un vistazo al back-end de tu sitio web, ya que es un poco complicado de contar solo desde el front-end. Siéntase libre de contactarnos aquí: https://www.blackbeltcommerce.com/contact/
Esto no parece funcionar con enlaces de navegación. ¿Es porque tienen Class = "Mobile-nav__link" asociado con ellos? El sitio en el que estoy intentando implementarlo es http://www.myofficebites.com
¡Gracias!
Hola, gracias por tu mensaje. Para solucionarlo, es probable que necesitemos echar un vistazo al back-end de tu sitio web, ya que es un poco complicado de contar solo desde el front-end. Siéntase libre de contactarnos aquí: https://www.blackbeltcommerce.com/contact/
Hola está funcionando pero en lugar de desplazamiento suave, está saltando a la ubicación.