提问者:小点点

在导航栏中为页面跳转URL添加滚动动画


当我按链接(在本例中为contact_us)时,我试图使一个平滑的滚动出现在同一个页面上的不同部分中的锚标记(#contact_us)。
问题是没有任何平滑的滚动,它只是立即将我发送到锚标记。
我如何确保当我按链接时有一个平滑的滚动效果?
我应该使用JS还是只使用CSS(如果可能的话),因为我使用的是PHP?

提前感谢你的提示:D。


共2个答案

匿名用户

你可以这样添加平滑滚动。检查控制台日志错误,如果任何其他脚本得到冲突。

null

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

匿名用户

您可以使用一点CSS:

body{ scroll-behavior: smooth; }

查看Mozilla文档了解更多信息