如何为链接触发的过渡设置动画答案

【问题标题】：How to animate transitions triggered by links如何为链接触发的过渡设置动画
【发布时间】：2016-04-11 23:12:32
【问题描述】：

我发现this 有用的 jQuery 用于在链接内容滚动时突出显示的导航。我想我理解它是如何工作的，但是我在为点击的项目添加过渡/动画时遇到了麻烦。我希望这些部分在导航触发时平滑过渡。

我已尝试将其添加到 CSS 中

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

还有jQuery

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

如果我在这个特定的例子中做错了什么，我真的很感激。

这是代码和https://jsfiddle.net/r040p7oa/

<div id="navigation">
<ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>     
</ul>
</div>
<div id="sections">
<div id ="section1" class="section">I'm section 1</div>
<div id ="section2" class="section">I'm section 2
</div>

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

https://jsfiddle.net/r040p7oa/

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

工作fiddle :) 代码来自here

【讨论】：

啊哈！非常感谢，也提供链接
使用e.preventDefault() 是优于return false 的最佳实践。详细解释请见this post。
没问题！很高兴我能帮助你。 @giorgio 好点，谢谢。
@SamuelHill 很抱歉这样问，但是您知道我如何将偏移更改为页面顶部，以便链接更快响应吗？我正在尝试一切！ // .offset().top + 200 // .scrollTop({top:200}) 但没有运气
@user3821345 是 this 你想要什么？

【解决方案2】：

应该这样做：

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

Here is the JSFiddle demo

【讨论】：