实战网页实现平滑滚动
- 在导航中，我们使用#简单的实现了，现在我们要实现，点击导航自动跳转指定的节去，通过id去选择
<ul class="main-nav-list">
<li><a class="main-nav-link" href="#how">工作流程</a></li>
<li><a class="main-nav-link" href="#meals">餐品展示</a></li>
<li><a class="main-nav-link" href="#testimonials">用户案例</a></li>
<li><a class="main-nav-link" href="#pricing">餐品价格</a></li>
<li><a class="main-nav-link nav-cta" href="#cta">免费试用</a></li>
</ul>这样我们点击导航就能跳转到指定的节了
- 但是这样跳转非常的生硬，我们可以添加一个参数让动画变得更加得流畅
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth; ##scroll-behavior: smooth;是CSS属性，用于控制浏览器滚动时的动画效果。当这个属性设置为smooth时，浏览器会以平滑的动画效果滚动到指定位置，而不是瞬间跳转。
}但是，这个参数并不是所有浏览器都支持！
- 当然我们可以使用js来实现平顺滑动的效果
const allLinks = document.querySelectorAll('a:link');
allLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
const href = link.getAttribute('href');
if (href === "#") window.scrollTo({
top: 0,
behavior: "smooth",
});
if (href !== "#" && href.startsWith('#')) {
const sectionEl = document.querySelector(href);
sectionEl.scrollIntoView({
behavior: "smooth"
});
}
});
});
##这段JavaScript代码实现了一个简单的响应式导航栏。它为所有链接添加了一个点击事件监听器，当用户单击链接时，它会阻止默认行为并获取链接的href属性值。如果href属性值为“#”，则将窗口滚动到页面顶部。如果href属性值不为“#”，则检查它是否以“#”开头。如果是，则获取对应的页面元素，并将窗口滚动到该元素的位置，以实现平滑滚动效果。- 注意，这里我们在HTML引用了一段JS，为了解决不兼容的问题
<script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>
##这段JavaScript代码引入了一个名为"smoothscroll-polyfill"的JavaScript库，并将其设置为在文档加载时异步加载（defer属性）。这个JavaScript库的作用是在不支持平滑滚动的浏览器中实现平滑滚动效果。在某些较老的浏览器中，平滑滚动效果可能无法正常工作，这个JavaScript库可以解决这个问题。它通过在不支持平滑滚动的浏览器中使用JavaScript模拟平滑滚动效果来实现这一点。因此，当用户单击页面中的链接时，无论用户使用什么浏览器，都可以获得平滑的滚动效果。这样就能实现平顺滑动的效果了；
现在还有一个问题
当我们用手机的时候，点击导航栏，跳转的时候，这个导航还是不会消失；我们可以用JS来实现跳转之后导航关闭
if (link.classList.contains("main-nav-link"))
headerEl.classList.toggle("nav-open");
这段代码是用来实现简单响应式导航栏的，当点击具有 "main-nav-link" 类的链接时，它会切换 "nav-open" 类在头部元素上的存在。这个类通常用于控制导航栏的显示和隐藏。具体来说，如果头部元素上已经有 "nav-open" 类，则它将被删除，否则它将被添加。这个类的存在与否决定了导航栏是否可见。