javascript - 将滚动动画添加到导航栏中的页面跳转 URL

Question

当我按下链接（在这种情况下Contact us）到锚标记（）时，我试图进行平滑滚动，该锚标记（#contact_us）出现在不同部分但在同一页面上。
问题是没有任何平滑滚动，它只是立即将我发送到锚标签。
如何确保点击链接时有平滑的滚动效果？
我应该使用 JS 还是只使用 CSS（如果可能的话），因为我使用的是 PHP？

提前感谢您的提示：D。

Answer 1

您可以通过这种方式添加平滑滚动。如果任何其他脚本发生冲突，请检查控制台日志错误。

$(".scrollMe").click(function() {
    $('html, body').animate({
        scrollTop: $(".bottom").offset().top
    }, 1000);
});

.top{background: green;height:700px;width:100%;}
.bottom{background: pink;height:700px;width:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a class="scrollMe" href="#">Scroll Down</a>
<div class="top">
</div>

<div class="bottom">
</div>

Answer 2

你可以用一点 css 做到这一点：

body{ scroll-behavior: smooth; }

查看Mozilla 文档以获取更多信息