¿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...
Here is the page… 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!
Hi David! Thanks for reading, glad it’s working well on your site 🙂 As for setting it up over a multi-page site — that’s something we might need to take a deeper look at in a custom mini-project, as it really depends on your site 🙂 Feel free to contact us at the link below and happy to see if we can help > 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...
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.
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
This doesn’t appear to work with navigation links. Is it because they have class=”mobile-nav__link” associated with them?
¡Gracias!
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
Hola está funcionando pero en lugar de desplazamiento suave, está saltando a la ubicación.