Trouble with scrollIntoView javascript

Question

我试图让我的JavaScript滚动到视图上我点击一个div。当我点击它时，什么也没发生。

我已经做了一些事情来排除故障:console.log在scrollToAbout部分工作正常，我可以运行其他功能，如改变innerHTML就好。ScrollIntoView似乎什么都没做。在开发控制台没有错误。

div的HTML，我点击

<div class="lander">
<div class="intro"></div>
<div id="navbar">
<a href="#" class="navlist hyperlink" id="aboutButton">about</a>
<a href="#" class="navlist hyperlink" id="contactButton">contact</a>
<a href="#" class="navlist hyperlink" id="funButton">fun</a>
</div>
</div>

我想滚动到的div的HTML:

<div class="row hello col-12 p-0 m-0" id="aboutSection">
<img class="xyz col-12 col-md-6" src="xyz" alt="">
<p class="aboutme col-12 col-md-6"> THIS SECTION </p>
</div>

然后这里是我写的JS:

let aboutButton = document.querySelector('#aboutButton');
let aboutSection = document.querySelector('#aboutSection');
aboutButton.onclick = function(){
scrollToAbout()
};

function scrollToAbout(){
aboutSection.scrollIntoView({ behavior: 'smooth'});
};

Answer 1

锚点(href="#")的href属性导致页面滚动到顶部。

根据MDN:

您可以使用href="#top"或空片段(href="#"))链接到当前页面的顶部…

你应该完全删除它，或者，如果你想保留锚样式，设置href为javascript:void(0)。

,

aboutButton.onclick = function(){
scrollToAbout()
};

是多余的。只要aboutButton.onclick = scrollToAbout就可以了。

let aboutButton = document.querySelector('#aboutButton');
let aboutSection = document.querySelector('#aboutSection');
function scrollToAbout() {
aboutSection.scrollIntoView({
behavior: 'smooth'
});
};

aboutButton.onclick = scrollToAbout;

#navbar {
margin-bottom: 500px;
}

<div class="lander">
<div class="intro"></div>
<div id="navbar">
<a class="navlist hyperlink" id="aboutButton">about</a>
<a href="#" class="navlist hyperlink" id="contactButton">contact</a>
<a href="#" class="navlist hyperlink" id="funButton">fun</a>
</div>
</div>
<div class="row hello col-12 p-0 m-0" id="aboutSection">
<img class="xyz col-12 col-md-6" src="xyz" alt="">
<p class="aboutme col-12 col-md-6"> THIS SECTION </p>
</div>