Creé un sitio web de Elementor usando fullPage.js (Este es el sitio web: https://dev-testing-hp.pantheonsite.io/?page_id=18 ). Seguí este tutorial ( https://www.youtube.com/watch?v=CDTsVrajj-Y&t=490s&ab_channel=webnatusolutions ) y creé una plantilla para cada sección. Ahora quiero crear un menú y lo probé agregando una ID de CSS a cada sección, pero cuando hago clic en el menú, salta directamente a la sección, pero sin desplazarse hacia abajo. Entonces, cuando el usuario hace clic en "Über mich", salta a "über mich". Hasta ahora todo bien, pero el problema es que cuando el usuario quiere desplazarse hacia arriba, ya no es posible ya que los puntos del menú a la derecha todavía piensan que es la primera página.
Espero que entiendas mi problema, si no, solo mira mi página y pruébalo tú mismo. Esperemos que tenga una solución para este problema. ¡Gracias!
Este es el código que puse en el HTML en la página principal de Elementor:
<div id="fullpage"> <div class="section">[INSERT_ELEMENTOR id="325"]</div> <div class="section">[INSERT_ELEMENTOR id="30"]</div> <div class="section">[INSERT_ELEMENTOR id="180"]</div> <div class="section">[INSERT_ELEMENTOR id="194"]</div> <div class="section">[INSERT_ELEMENTOR id="206"]</div> <div class="section">[INSERT_ELEMENTOR id="379"]</div> <div class="section">[INSERT_ELEMENTOR id="278"]</div> <div class="section">[INSERT_ELEMENTOR id="429"]</div> </div>Este es el HTML que agregué con un complemento HTML, JS, CSS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>Y este es el JS que agregué con el mismo complemento:
jQuery(document).ready(function($) { $('#fullpage').fullpage({ //options here scrollingSpeed: 1000, navigation: true, slidesNavigation: true, responsive: 800, }); //methods $.fn.fullpage.setAllowScrolling(true); });