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中，您可以使用scroll-behavior: smooth CSS；在其他浏览器中是not yet supported，但是polyfills确实存在。

* {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用于animate the page's scrollTop，但是除非您已经将jQuery用于其他目的，否则我认为仅将一个修饰函数包含整个库就不值得了。

来自<a href""=""> to div tag</a>的平滑滚动css代码

2 个答案: