javascript - 滚动到设置高度的 div 内 anchor

Question

我希望有人可以帮助我解决我的 Javascript 问题。 JSFiddle 向您展示了我已经走了多远，离我不远了……但我基本上是在尝试让包含的 DIV 的内容在单击导航时与“.news_window”框的顶部对齐。

http://jsfiddle.net/s5sxa0sk/2/

我意识到 scrollTop 转到“this”是不正确的，但我不知道如何继续。

任何输入将不胜感激。

HTML:

<ul class="news_archive">
  <li class="active"><a href="#2014_dec">December</a></li>
  <li><a href="#2014_nov">November</a></li>
  <li><a href="#2014_oct">October</a></li>
</ul>

<div class="news_window">
  <div id="dec_2014">
    <p>December Content</p>
  </div>
  <div id="nov_2014">
    <p>November Content</p>
  </div>
  <div id="oct_2014">
    <p>October Content</p>
  </div>
</div>

Javascript:

<script>
 $(".news_archive li").click(function(e){
     e.preventDefault();
     $('.news_window').animate({scrollTop:$(this).position().top}, 'slow');
     $('.news_archive li.active').removeClass('active');
     $(this).addClass('active');
});
</script>

Answer 1

您的主要问题是您使用#new_archive 链接的顶部位置而不是#news_window 元素的顶部位置来设置滚动动画。您需要根据点击的链接找到 #news_window 元素并使用该元素的 position().top。

您还需要围绕#news_window 项进行包装，否则每个元素的position().top 将根据#news_window 元素的当前滚动位置而改变。此包装器需要设置 position: relative。

我的意思是:

<ul class="news_archive">
    <li class="active">
        <a data-id="dec_2014" href="#">December</a>
    </li>
    <li>
        <a data-id="nov_2014" href="#">November</a>
    </li>
    <li>
        <a data-id="oct_2014" href="#">October</a>
    </li>
</ul>

<div class="news_window">
    <div class="wrapper">
        <div id="dec_2014">
            <p>December Content</p>
        </div>
        <div id="nov_2014">
            <p>November Content</p>
        </div>
        <div id="oct_2014">
            <p>October Content</p>
        </div>
    </div>
</div>

和 Javascript:

$('.news_archive li a').click(function(e) {
    e.preventDefault();

    var newsWindowEl = $('#'+$(this).data('id'));

    $('.news_window').animate({
        scrollTop: newsWindowEl.position().top
    }, 'slow');

    $('.news_archive li.active').removeClass('active');
    $(this).parents('li').addClass('active');
 });

这是您的 fiddle 的工作版本:http://jsfiddle.net/s5sxa0sk/42/