Я ищу, чтобы создать страницу, которая позволяет использовать кнопки назад и вперед для содержимого на странице. Я выполнил основные функциональные возможности, используя JQuery адрес, как представлено наjQuery in page back button scrolling
- http://www.asual.com/jquery/address
Проблема, которую я имею, как получить функцию обратного вызова для работы в координация с плагином jQuery scrollTo для обеспечения анимированного назад и перемотки вперед.
//Navigation between slides
$('.nav-button').click(function(e) {
e.preventDefault();
$.scrollTo($(this).attr('href'), 'slow', {easing:'easeInOutExpo'});
});
//Storage and activation of back and forwards attributes
$('a').click(function() {
$.address.value($(this).attr('href'));
});
//Callback to scroll on back or forwards
//NEED HELP HERE
$.address.change(function(event) {
$.scrollTo(event.value(), 'slow', {easing:'easeInOutExpo'});
});
Как я уверен, вы можете увидеть проблему реально не так сложно, но так как я все еще учусь она выходит за рамки моих знаний. Буду признателен за любую оказанную помощь.
Все содержание содержится в одной странице, разделенной на различные «страницы» с использованием различных Div элементов с общим классом
UPDATE:
Я создал скрипку, чтобы отобразить вопрос более четко.
jsfiddle.net/d7uZ7/6
В нижней части JQuery является то, что будет использоваться для запуска прокрутки после задней или вперед страницы события
РЕШЕНИЕ:
Так после долгого сражения с этим было найдено решение (сорта). Кроме того, я не должен, чтобы без чата с JacobMcLock ничего из этого не было бы возможно.
Во всяком случае, последняя часть моей должности должна быть изменена на один из двух следующих блоков кода
//Method 1
$.address.change(function (event) {
var value = event.value,
i = value.indexOf('#'),
$element = (i === -1) ? $("body") : $(value.substr(i, value.length-1));
$.scrollTo($element, 'slow', {easing:'easeInOutExpo'});
});
//Method 2
$(window).on('hashchange', function(event) {
event.preventDefault();
$.address.change(function (event) {
var value = event.value,
i = value.indexOf('#'),
$element = (i === -1) ? $("body") : $(value.substr(i, value.length-1));
$.scrollTo($element, 'slow', {easing:'easeInOutExpo'});
});
});
Используйте первый блок для лучшей скорости, но с отсутствием совместимости. Это будет работать по желанию в Chrome и Safari и в других случаях будет глючить. Это потому, что они обрабатывают hashchange
и popstate
событий правильно, а другие нет. Как ни странно, некоторые старые браузеры также будут работать правильно.
Второй способ, в то время как гораздо медленнее (есть заметная задержка при запуске анимации), будет работать почти во всех браузерах полу-хорошо. Да, просто полу-хорошо, иногда все еще не получается. Таким образом, реальность заключается в том, что из-за того, что браузеры не используют эти теги правильно, вы наверняка застряли со скучным старым неанимированным назад и вперед в переходы страниц. Так грустно. Если вам не нравится делать монументальное количество кодирования.
Так что, если кто-то может найти что-то лучше этого, не забудьте отправить его здесь. Но я думаю, что это лучшее, что будет на данный момент. – foochow