У меня есть липкое боковое меню, которое я хотел бы иметь возможность ссылаться на следующий или предыдущий пост на главной странице WordPress, в зависимости от того, где вы находитесь в строке сообщений.Функциональность будет похожа на стрелки вверх и вниз на левой стороне этого сайта (явно не мои): http://www.dbworks.pro/
У меня уже есть функция Scrollto, работающая на странице, чтобы я мог ссылаться навстроенный якорь сверху и снизу, и он будет прокручиваться к нему.Я также уже настроил каждый пост так, чтобы он извлекал номер поста и соответственно устанавливал идентификатор содержащего div.
Есть ли способ получить предыдущие / следующие ссылки, чтобы узнать, в каком посте я нахожусьна странице и рассчитать, какой будет подходящий div для прокрутки?Спасибо за вашу помощь.
- Правка --------------------------------------------------
Поэтому я пытаюсь адаптировать этот скрипт для своих целей, и я могу заставить все работать, кроме функции перемещения,Элементы прячутся и отображаются в правильное время, и ссылки работают, если в поле привязки якоря установлено другое действие 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>
Каждый пост также помечен с помощью class = "post-container".Любые мысли о том, почему это не будет работать?Опять же, я адаптировал это для своих целей с другого сайта.,,так что могут быть некоторые устаревшие значения, которые я не знаю, мне нужно будет изменить.