0
136
VistasDesplácese a la sección en Reactjs usando jQuery
Tengo una aplicación reactjs con múltiples componentes,
function App() { return ( <main className="text-white"> <Navbar /> <About /> <Skills /> <Experience /> <Project /> <Contact /> </main> ); } ¿Cómo puedo usar jQuery dentro del componente de la barra de navegación para desplazarme a estas secciones? 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Realmente no necesitas JQuery. Puede hacer esto usando atributos HTML y CSS. Simplemente adáptelo al marco React.
- Dar a cada sección una identificación
- Haz que los elementos de navegación sean etiquetas
<a> - Agregue la ID de cada sección como la propiedad
hrefde su respectiva etiqueta<a> - En el CSS, agregue
scroll-behaviour: smootha la etiqueta<html>.
Ejemplo:
html { scroll-behavior: smooth; height: 2600px; overflow: auto; display: flex; flex-direction: column; justify-content: space-between; } p { margin: 200px 0; } <div> <a href="#about">About</a> <a href="#skills">Skills</a> </div> <div> <p id="about">This is about text</p> <p id="skills">This is skills text</p> </div>PERO...
Si realmente quieres usar JQuery, puedes hacerlo así:
function scrollToSection(sectionID) { $('html, body').animate({ scrollTop: $(sectionID).offset().top }, 400); } html { height: 2600px; overflow: auto; display: flex; flex-direction: column; justify-content: space-between; } .btn { display: inline-block; cursor: pointer; color: blue; text-decoration: underline; } p { margin: 200px 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="btn" onclick="scrollToSection('#about')">About</div> <div class="btn" onclick="scrollToSection('#skills')">Skills</div> </div> <div> <p id="about">This is about text</p> <p id="skills">This is skills text</p> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta