How to make scroll work on nav click with scrollTop

Question

I am looking for way to make page scroll on menu click.

My found place where to go. When I use translateY it work(but ofcouse I can't use it). I need a scroll I tried to use scrollTop and scrollBy but it doesn't work for me. What I do wrong?

function scroll(id: number) {
            for (let k = 0; k < sectionsForScroll.length; k++) {
                if (sectionsForScroll[k].dataset.navId == id) {
                    const bigginer = sectionsForScroll[0].getBoundingClientRect().top;
                    console.log( bigginer + 'px  how far we from the start ');
                    const distanceToGo= sectionsForScroll[k].getBoundingClientRect().top;
                    console.log(sectionsForScroll[k].offsetTop);
                    const distanceToScroll = bigginer - distanceToGo;
                    console.log(distanceToGo + ' where we have to go ');
                    console.log(distanceToScroll + ' what the distanse we need to scroll ');
                    main.style.transform = 'translateY(' + distanceToScroll + 'px)';
                    // main.scrollTop=distanceToGo;
                    // window.scrollBy(0, distanceToGo);
                }
            }
        }

score 0 · Accepted Answer · answered Feb 04 '19 at 18:53

0

window.scroll will work for you. Here is an example of scrolling 300px after clicking the scroll button.

Before using it you should checkout the compatibility table for the smooth option.

document.getElementById("myButton").addEventListener("click", scrollMe);

function scrollMe() {
  window.scroll({
    top: 300,
    left: 0,
    behavior: 'smooth'
  });
}

.myDiv {
  background-color: green;
  height: 1000px;
}

<div class="myDiv">
  <button id="myButton">Scroll</button>
</div>

answered Feb 04 '19 at 18:53

Andrew Lohr

5,380
1
26
38

Thank you! Safari doesn't support this way. What is better to use that cover Safari? – Noa Feb 04 '19 at 21:51
No problem! Safari will still support the scrolling part, but it does not support the "smooth" option. Is that okay? – Andrew Lohr Feb 04 '19 at 21:56
Yes, I saw scrolling, but I unfortunetely I need "smooth". – Noa Feb 04 '19 at 22:19
this might give you some options https://stackoverflow.com/questions/10063380/smooth-scroll-without-the-use-of-jquery – Andrew Lohr Feb 06 '19 at 13:45

How to make scroll work on nav click with scrollTop

1 Answers1