0
138
ViewsNo se puede vincular a parte de la página con el cajón MUI 5
Simplemente estoy tratando de vincular a una parte específica de mi primera página cuando el usuario hace clic en el botón Comprar en el Cajón de navegación, pero no hace nada en absoluto:
Este es el código para el componente Cajón MUI 5:
<Drawer anchor="left" open={open} onClose={() => setOpen(false)} PaperProps={{ sx: { background: "linear-gradient(to top, #9C685B44, #9C685Bff)", }, }} > <IconButton onClick={() => setOpen(false)}> <ChevronLeftIcon sx={{ color: "white" }} /> </IconButton> <Divider /> <List> ///////////////////////////////// <ListItem> <Button // Linking to Products Section href="#products" startIcon={<PhoneAndroidIcon />} sx={{ color: "white", fontFamily: "Montserrat", }} > Shop </Button> </ListItem> ////////////////////////////// <ListItem> <Badge color="error" badgeContent={badgeNumber}> <Button startIcon={<ShoppingCartIcon />} sx={{ color: "white", fontFamily: "Montserrat", }} > Cart </Button> </Badge> </ListItem> </List> </Drawer>Y en esa sección respectiva, he agregado una identificación con el valor de los productos al contenedor:
<Container maxWidth="xl" id="products"> ... </Container>Incluso el uso de la etiqueta de anclaje da como resultado el mismo problema.
¿Hay alguna forma de arreglar esto?
1 answers
Answer question0
Puede usar scrollIntoView y History.pushState() para manejar esto. Elimine el href de su componente Button y, en su lugar, use su método onClick para llamar a lo siguiente:
// id is your section names (eg 'products') // url is optional, and if not specified, is set to the document's current URL const onNavClick = (event, id, url) => { let element = document.getElementById(id) event.preventDefault() element.scrollIntoView() window.history.pushState(id, id, url) } Hay varias otras opciones que puede pasar a scrollIntoView , y puede obtener más información sobre las opciones disponibles siguiendo el enlace anterior.