你可以按照以下步骤来实现网站导航功能：
在页面上创建一个水平的导航栏，可以使用HTML和CSS实现，比如使用ul和li标签创建一个无序列表，将其样式设置为水平排列，添加样式并放置在页面顶部。
为每个导航链接添加id属性，这样可以在JavaScript中找到并滚动到相应的部分。
使用JavaScript添加事件监听器，监听导航链接的点击事件。
在事件处理程序中使用JavaScript的scrollTop属性将页面滚动到相应的部分，可以使用getElementById方法获取要滚动到的元素的id属性，并使用scrollIntoView()方法滚动到该元素。
以下是示例代码：
HTML代码：
<ul class="nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
<div id="section1">Section 1 content</div>
<div id="section2">Section 2 content</div>
<div id="section3">Section 3 content</div>
CSS代码：
.nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav li {
margin-right: 20px;
}
.nav li:last-child {
margin-right: 0;
}
JavaScript代码：
var navLinks = document.querySelectorAll('.nav li a');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function(e) {
e.preventDefault();
var targetId = this.getAttribute('href');
var targetElement = document.querySelector(targetId);
var targetPosition = targetElement.offsetTop;
window.scrollTo({
top: targetPosition,
behavior: "smooth"
});
});
}