CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vir
vir

Reputation: 55

How to navigate to a section of a page using animation?

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);

Upvotes: 2

Views: 3177

Answers (3)

THAMIZHARASAN K
THAMIZHARASAN K

Reputation: 21

In your stylesheet add this code it will work fine

html{scroll-behavior: smooth;}

Upvotes: 2

Amit Soni
Amit Soni

Reputation: 1427

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);
    });

Upvotes: 2

Sakai
Sakai

Reputation: 637

This should work:

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

http://api.jquery.com/scrolltop/

Upvotes: 2

Related Questions