in one page, if we have html like this

and we click on tag it will navigate to particular section, that's fine

<a href="#shushi">Sushi</a>
<a href="#bbq">BBQ</a>

Sample Page:
<div id='sushi'></div>
<div id='bbq'></div>

but is it possible to add some animation effect when we click on it shushi and bbq and navigate to that section?

something like this :

$([some id]).animate({scrollTop: $elem.height()}, 800);

in one page, if we have html like this

and we click on tag it will navigate to particular section, that's fine

<a href="#shushi">Sushi</a>
<a href="#bbq">BBQ</a>

Sample Page:
<div id='sushi'></div>
<div id='bbq'></div>

but is it possible to add some animation effect when we click on it shushi and bbq and navigate to that section?

something like this :

$([some id]).animate({scrollTop: $elem.height()}, 800);

• javascript
• jquery
• html
• css

3 Answers 3

Working DEMO

$(document).on("click","a",function(e){
        e.preventDefault();
        var id = $(this).attr("href"),
            topSpace = 30;
        $('html, body').animate({
          scrollTop: $(id).offset().top - topSpace
        }, 800);
    });

This should work:

$('html, body').animate({scrollTop: $elem.scrollTop()}, 800);

http://api.jquery./scrolltop/

In your stylesheet add this code it will work fine

html{scroll-behavior: smooth;}