Smooth scroll css code from to div tag

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>

I wrote this code to jump to that particular div tags according to their # id's in the href. I wanted to jump to the div with smooth scrolling effect. Any CSS implementation needed?

Answer 1

try this jQuery.ScrollTo

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

Answer 2

In Firefox and Chrome, you can use the scroll-behavior: smooth CSS; this is not yet supported in other browsers, but polyfills do exist.

* {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>

You could also use jQuery to animate the page's scrollTop, but unless you are already using jQuery for other purposes I wouldn't think it worth including the entire library for just one cosmetic function.