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

Question

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

提前感谢您的提示：D。

Answer 1

您可以使用一点css：

body{ scroll-behavior: smooth; }

查看Mozilla文档了解更多信息

Answer 2

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

$(".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>