2011-08-16 59 views
1

我有一個粘性側面菜單,我希望能夠鏈接到wordpress主索引頁上的下一個或上一篇文章,根據你在哪裏帖子的線。該功能將類似於本網站左側上的向上和向下箭頭(顯然不是我的):http://www.dbworks.pro/Wordpress主頁動態滾動下一頁/上一頁按鈕滾動條

我已經具有滾動功能在頁面上工作,以便我可以鏈接到嵌入式錨點頂部和底部,它會滾動到它。我也已經設置每個帖子,以便它拉動帖子號碼並相應地設置包含div的id。

有什麼方法可以讓我得到上一個/下一個鏈接,以識別我在頁面上的哪個帖子,並計算哪個是適當的div滾動到?謝謝你的幫助。

- 編輯------------------------------------------ --------

所以我試圖適應這個劇本爲我的目的,我可以讓一切工作,除了運動功能。元素在正確的時間隱藏和顯示,如果在錨點的onclick字段中放置了不同的javascript動作,則鏈接將工作。唯一不能工作的是前一個和下一個項目滾動功能。這是我一直在使用JavaScript:

<script type="text/javascript"> 
function goToProject(project_number) { 
current = project_number; 
var top = 0; 
if (current == 0) { 
    top = 0; 
} 
else { 
    top = $(project_list[project_number]).offset().top - 86; 
} 
$.scrollTo(top, 500, 'linear'); 
} 

function calcCoordinates() {  
project_list.each(function(i) { 
    project_coordinates[i] = $(this).offset().top; 
}); 
} 

function calcCurrent() { 
for (n=0; n<project_coordinates.length; n++) { 
    if ($(window).scrollTop() >= (project_coordinates[n] - 90)) { 
    current = n; 
    } 
    else { 
    break; 
    } 
    } 
} 

$(document).ready(function() { 

project_list = $('.post-container'); 
project_coordinates = Array(); 
current = 0; 

calcCoordinates(); 

$('#top-link').hide(); 
$('#previous-link').hide(); 
$('#next-link').hide(); 
$('#bottom-link').hide(); 
}); 


$(window).scroll(function() { 
calcCurrent(); 

if ($(window).scrollTop() > 1000) { 
    $("#menu").css({ "display": "block" }); 
    $('#top-link').fadeIn('100'); 
    $('#previous-link').fadeIn('100'); 
    $('#next-link').fadeIn('100'); 
    $('#bottom-link').fadeIn('100'); 
} 
else { 
    $('#top-link').fadeOut('100'); 
    $('#previous-link').fadeOut('100'); 
    $('#next-link').fadeOut('100'); 
    $('#bottom-link').fadeOut('100'); 
} 

}); 

$(window).resize(function() { 
calcCoordinates(); 
calcCurrent(); 
}); 
</script> 

這裏是我的對應的HTML:

<ul id="menu"> 
<li><a id="top-link" href="#firstpost"><h4>Top</h4></a></li> 

<li><a id="previous-link" onclick="if (current > 0) { goToProject(current-1); } return false;"><h4>Previous</h4></a></li> 

<li><a id="next-link" onclick="if (current < project_list.length - 1) { goToProject(current+1); } return false;"><h4>Next</h4></a></li> 

<li><a id="bottom-link" href="#sidebar"><h4>Bottom</h4></a></li> 

</ul> 

每個帖子還標有類=「容器後」。任何想法,爲什麼這不會工作?再一次,我已經從另一個網站爲我的目的調整了這一點。 。 。所以可能會有一些遺留的價值,我不知道我需要改變。

回答