0
412
ViewsThis smooth scroll function is not working, despite of setting the correct target
Here is the code for the smooth scroll and I have correctly imported it from React library still it yeilds no result:
const scrollToNextSection = () => {
scroller.scrollTo("SecondSection", { smooth: true, duration: 1500 });
};
here is the image of the section being called
·
Juan Pablo Isaza
1 answers
Answer question0
I have did with native DOM method scrollIntoView
It may not be an efficient example but the scroll is smooth as expected
For better view see this code sandbox link - smooth scroll
- used Ref's
const App = () => {
const refOrange = React.useRef(null);
const refBlue = React.useRef(null);
function scrollToNode(node) {
node.current.scrollIntoView({ behavior: "smooth" });
}
return (
<div>
<div
ref={refBlue}
onClick={() => scrollToNode(refOrange)}
className="div1"
>
Click to smooth scroll to orange
</div>
<div
ref={refOrange}
onClick={() => scrollToNode(refBlue)}
className="div2"
>
Click to smooth scroll to sky blue
</div>
</div>
);
}
ReactDOM.render(<App/>,document.querySelector('#root')).App {
font-family: sans-serif;
text-align: center;
}
.div1 {
height: 200px;
background-color: aqua;
margin-bottom: 30px;
}
.div2 {
height: 200px;
background-color: rgb(255, 72, 0);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
·
Juan Pablo Isaza
Report
Answer question