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

Question

当我按下链接（在本例中为 Contact us）指向位于不同部分但位于同一页面上的锚标记 (#contact_us) 时，我正在尝试平滑滚动。
问题是没有任何平滑滚动，它只是立即将我发送到锚标签。
如何确保点击链接时有平滑的滚动效果？
因为我使用的是 PHP，我应该使用 JS 还是只使用 CSS（如果可以的话）？

提前感谢您的提示：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>