react-scroll-to-component
Smooth srolls to react component via reference
Install
With npm
npm install react-scroll-to-component --save
With Yarn
yarn add react-scroll-to-component
scrollToComponent(ref, <options>)
Valid options:
offset : number
Add an offset to the final position. if > 0 then page is moved to the bottom otherwise the page is moved to the top.
align : string
Alignment of the element. Can be one of
'top'
,'middle'
or'bottom'
. Defaulting to'middle'
.
ease : string
Easing function defaulting to "out-circ" (view ease for more)
duration : number
Animation duration defaulting to
1000
Example
; // without options; //with options;
Demo
;;; Component { ; } { return <div className='main'> <div className='button_group'> <button onClick= >Go To Violet</button> <button onClick= >Go To Indigo</button> <button onClick= >Go To Blue</button> <button onClick= >Go To Green</button> <button onClick= >Go To Yellow</button> <button onClick= >Go To Orange</button> <button onClick= >Go To Red</button> </div> <section className='violet' ref= { thisViolet = section; }>Violet</section> <section className='indigo' ref= { thisIndigo = section; }>Indigo</section> <section className='blue' ref= { thisBlue = section; }>Blue</section> <section className='green' ref= { thisGreen = section; }>Green</section> <section className='yellow' ref= { thisYellow = section; }>Yellow</section> <section className='orange' ref= { thisOrange = section; }>Orange</section> <section className='red' ref= { thisRed = section; }>Red</section> <b>Inspired By <a href="https://hopechen1028.github.io/hopechen.me/" target="_blank">Hope</a> with Love and Peace</b> </div> } ;
License
MIT