我希望有人能用我的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>
答案 0 :(得分:2)
您的主要问题是您使用#new_archive链接的顶部位置来动画滚动而不是#news_window项目的顶部位置。您需要根据点击的链接找到#news_window元素,并使用该元素的位置()。顶部。
你还需要#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');
});
这是你小提琴的工作版本:http://jsfiddle.net/s5sxa0sk/42/