[英]Scroll to anchor within div of set height
我希望有人可以幫助我使用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>
您的主要問題是您使用的是#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');
});
這是您的提琴的工作版本: http : //jsfiddle.net/s5sxa0sk/42/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.