我有一個粘性側面菜單,我希望能夠鏈接到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>
每個帖子還標有類=「容器後」。任何想法,爲什麼這不會工作?再一次,我已經從另一個網站爲我的目的調整了這一點。 。 。所以可能會有一些遺留的價值,我不知道我需要改變。