平滑滚动 css 代码从 <一个 href " " >到 div 标签

Question

<div style="border-radius: 10px; border: 2px solid #a1a1a1; padding: 10px 20px; width:      94%;">
<ul>
<li>Course details in different countries
<ul>
<li><a href="#bdpindia">India</a></li>
<li><a href="#bdpaus">Australia</a></li>
<li><a href="#bdpuk">United Kingdom</a></li>
<li><a href="#bdpch">China</a></li>
<li><a href="#bdpeng">England</a></li>
</ul>
</li>
</ul>
</div>

我编写此代码是为了根据 href 中的 # id 跳转到该特定的div 标签。我想跳到具有平滑滚动效果的div。需要任何CSS实现吗？

Answer 1

试试这个jQuery.ScrollTo

$.scrollTo('a[href=bdpaus]');

Answer 2

在 Firefox 和 Chrome 中，您可以使用 CSS scroll-behavior: smooth;其他浏览器尚不支持此功能，但 polyfill 确实存在。

* {line-height: 3em}
body {scroll-behavior: smooth}

<a href="#bottom">Click</a>
<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>a<br>b<br>c<br>
<div id="bottom">end of page</div>

你也可以使用jQuery来动画页面的scrollTop，但除非你已经将jQuery用于其他目的，否则我认为不值得只为一个装饰功能包含整个库。