CODEWITHSUNDEEP
next.jsreact-scroll
MarkoC
MarkoC

Reputation: 11

scroll to section in nextjs

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.

Upvotes: 1

Views: 2799

Answers (1)

Nine Magics
Nine Magics

Reputation: 737

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

Upvotes: 1

Related Questions