Javascript 如何设置链接触发的过渡动画

我发现jQuery对于作为链接内容滚动条突出显示的导航非常有用。我想我理解这是如何工作的，但是我在为单击的项目添加过渡/动画时遇到了问题。当导航触发时，我希望各部分平稳过渡

我已经尝试将此添加到CSS中

.section {
transition: transform .5s ease-in-out;
}

还有jQuery

$('#navigation').click(function(){
$('.section').animate('slow');
});

我真的很想在这个例子中解释一下我做错了什么

这是密码和密码

-

工作：）来自

的代码这应该可以：

$('a').click(function(e) {
   e.preventDefault();
   $('body, html').animate({scrollTop:$($(this).attr("href")).offset().top});
  });

---

啊哈！非常感谢您的链接使用

e.preventDefault（）

是优于

返回false

的最佳实践。详细解释请参见。当然！很高兴我能帮忙@乔治：说得好，谢谢。@SamuelHill很抱歉这样问，但你知道我如何更改页面顶部的偏移量，以便链接更快响应吗？我什么都在试。offset（）.top+200/.scrollTop（{top:200}），但没有luck@user3821345这就是你想要的？

#sections {
position: absolute;
top: 0;
left: 120px;
}

#navigation {
position: fixed;
top: 0;
left: 0;
}

.active {
background: red;
}

.section {
padding-bottom: 400px;
}

$(window).scroll(function() {

var position = $(this).scrollTop();

$('.section').each(function() {
    var target = $(this).offset().top;
    var id = $(this).attr('id');

    if (position >= target) {
        $('#navigation > ul > li > a').removeClass('active');
        $('#navigation > ul > li > a[href=#' + id + ']').addClass('active');
    }
});
});

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

$('a').click(function(e) {
   e.preventDefault();
   $('body, html').animate({scrollTop:$($(this).attr("href")).offset().top});
  });