Posted by ReViJa on May 31, 2018 at 6:43pm
Hola de nuevo, estoy volviendome loco con el tema de desplazamiento suave desde un elemento del menú hacia un bloque de newsletter que tengo en la parte inferior. Al poner en el menu #newsletter me desplaza de un tirón (rapidisimo) hacia el id=‘newsletter’ y hace un efecto muy feo.
He probado muchos módulos y ninguno lo ha resuelto.
¿Sabéis como lo puedo solucionar?
Tengo drupal 8 en su última versión.
Muchas gracias.
Comments
Hazlo con jQuery
La manera en que puedes hacer el desplazamiento mas fluido es con jQuery
asi
$(".botonMenu").click(function(){$('html, body').animate({
scrollTop: $("#ancla").offset().top
}, 1000);
});
De este modo el desplazamiento es suave y no importa que versión de drupal o cualquier CMS tengas
Hola Alvaro ¿donde deberia
Hola Alvaro ¿donde deberia añadir ese código
Y .botonMenu es el id del menú? Y #ancla ?
Es que no quiero equivocarme
Gracias por tu ayuda
En el archivo template de tu tema
Primero tienes que identificar si tu sitio esta construido con un tema custom, de ser asi tienes que identificar el archivo html.twig principal, que es en donde se encuentra la estructura generar del html, asi que debes agregar un archivo js adicional asi
esto debe estar dentro de la etiqueda del html.twig del template
<script src="/themes/custom/nombre del template/js/jsCustom.js"></script>en donde "jsCustom.js" es el archivo javascript en donde pondras el codigo del boton...
.boton es la clase del boton que esta en el menú
ancla es el id de la sección a la que hace referencia el boton del menú, en tu caso "#newsletter"
Hola Alvaro, no hay manera...
Hola Alvaro, no hay manera... He seguido tus pasos y no lo consigo hacer funcionar.
No se si tendrá algo que ver con el tema que estoy usando (Bootstrap) y un subtema de este.
Veo que la librería js se carga pero no hace nada...
Alguna solución?
Gracias por vuestro tiempo.
¿Esta cargando dentro del evento document ready?
Tienes que asegurarte de que el script que te di lo cargue dentro del evento ready
asi:
$(document).ready(function(){$(".botonMenu").click(function(){
$('html, body').animate({
scrollTop: $("#ancla").offset().top
}, 1000);
});
});
También puedes usar este
También puedes usar este módulo: https://www.drupal.org/project/smooth_mouse_scrolling (tal vez haya algun otro módulo)
Web developer: www.calbasi.net
Disculpad la demora, he
Disculpad la demora, he añadido el cambio que comenta AlvaroDev y seguimos igual.
calbasi el módulo que comentas lo que hace es que el scroll del ratón sea mas "lento" pero no tiene efecto con las anclas.
Estoy desesperado... Que burro soy..
Muchas gracias
Dame el link del sitio
Dejame ver el sitio si lo tienes online para saber que pasa
Qué lástima... Lo tengo
Qué lástima... Lo tengo probando en local hasta tener claros los cambios. No hay web online.
Smooth
Buenas ReViJa,
creo que lo que buscas se llama efecto smooth, donde haces clicks en las opciones de menú y te baja a los id de los DIVS con una velocidad pausada. Y como te dice @calbasi, hay un módulo que parece que hace eso, aunque yo personalmente no lo he probado.
Yo hice algo similiar en http://projectewebmunicipal.dipcas.es
Si quieres, mándame un privado a joan@riseup.net y te paso el código javascript y HTML que hace esto, que es super sencillo. Y ya luego tú lo adaptas a tu plantilla tpl.twig de tu Drupal.
un saludo,
joan
Probaré con más pausa e
Probaré con más pausa e módulo que comentáis y si sigo fracasando te mando un email ;-)
Muchas gracias !!