Question

我正在寻找使菜单单击页面滚动的方法。

我找到的去处。当我使用translateY时，它可以工作（但是，我不能使用它）。我需要一个尝试使用scrollTop和scrollBy的滚动条，但是它对我不起作用。我做错了什么？

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);
                }
            }
        }

Answer 1

window.scroll将为您服务。这是单击滚动按钮后滚动300px的示例。

在使用它之前，您应该先检出compatibility table的平滑选项。

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>

如何使滚动工作在导航上单击使用scrollTop

1 个答案: