1
import { Container } from "@material-ui/core";
import Image from "next/image";
import classes from './FeaturedProductHeader.module.scss'
import { IconButton } from "@material-ui/core";
import CloseIcon from '@material-ui/icons/Close';
import React, { useRef } from 'react'

const FeaturedProductHeader = (props) => {

    return (
            <header className={classes['header']}>
                <Container className={classes['headerContainer']}>
                    <div className={classes['content']}>
                        <div className={classes["logo"]}>
                            <img className={classes['mobileLogo']} src={props.mobileSrc} />
                            <Image className={classes['headerLogo']} src={props.src} width={props.width} height={props.height} />

                        </div>
                        <ul className={classes['headerList']} >
                            <li >{props.link1}</li>
                            <li>{props.link2}</li>
                            <li>{props.link3}</li>
                        </ul>
                    </div>
                    <IconButton className={classes['closeButton']} edge="start" color="inherit" onClick={props.onClick} aria-label="close">
                        <CloseIcon />
                    </IconButton>
                </Container>
            </header>
    )
}
     `export default FeaturedProductHeader;`

Is there any package that I can use for scrolling to section on click ? I tried with react-scroll but I am not sure if it's working for Next.js.

MarkoC
  • 11
  • 5
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Sep 24 '21 at 02:25

1 Answers1

1

You can utilise the scrollIntoView API if the parent element is in fact a scroll-container https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Nine Magics
  • 637
  • 2
  • 8
  • 17
  • scrollIntoView() worked! If you want your scroll to go down to a section smoothly, then you will have to do this: document.getElementById(...).scrollIntoView({behavior: "smooth"}); – austingae Jul 11 '22 at 01:55