1

smooth scrolling when you actually scroll but its not working when i click on the which it calls to scroll all the way to the top of the page it goes up instantly not SMOOTHLY

Topbar.jsx file

export default function Topbar() {
    return (
        <div className="topbar">
            <div className="wrapper">
                <div className="left">
                    <a href="#intro">asdasd</a>
                </div>
                <div className="right">

                </div>
            </div>
        </div>
    )
}

app.jsx file

     return (
       <div className="app">
         <Topbar/>
         <div className="sections">
           <Intro/>
           <Portfolio/>
           <Contact/>
         </div>
       </div>
     );
   }

app.scss file

    height: 100vh;

    .sections {
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #66190d;
        position: relative;
        top: 70px;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
        &::-webkit-scrollbar{
            display: none;
        }

        >* {
            width: 100vw;
            height: calc(100vh - 70px);
            scroll-snap-align: start;
        }
    }
}```
Tarek I.
  • 21
  • 4
  • Here you can find you answer https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link or you can use "preventDefault()" to change the default behaviour of the tag. – Aman Sharma Sep 22 '21 at 04:24
  • i am using Reactjs and that link is for jQuery. im not really there to use both together which would make sense using the link for jQuery yes. – Tarek I. Sep 23 '21 at 14:34
  • There are also JavaScript code to doing this. you need to scroll over the page. BTW you can also do this via CSS. here is the example https://stackoverflow.com/a/52004662/16914936 – Aman Sharma Sep 24 '21 at 06:17
  • i have scroll-behavior: smooth; in the block code i posted its there in the scss file but its not working right. – Tarek I. Sep 25 '21 at 21:09

0 Answers0