javascript - How to navigate to a section of a page using animation? - Stack Overflow

admin管理员组

文章数量:1425689

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

Share Improve this question Follow edited Jun 3, 2014 at 17:13 vir asked Jun 3, 2014 at 17:07 virvir 5511 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

本文标签： javascriptHow to navigate to a section of a page using animationStack Overflow