Я создаю сайт, где использую Ariel Fleslers Плагин jQuery LocalScroll , для которого я хочу сделать две вещи:
1) Анимация прокрутки до якоря при нажатии на ссылку
2) Прокрутите до ранее посещенного якоря при нажатии кнопки назад браузера.
Прокрутка происходит внутри контейнера, в котором содержимое переполняется.
Номер один был достаточно прост. Чтобы достичь второго, я немного погуглил, но на самом деле не нашел решения, хотя наткнулся на несколько постов людей, которые хотели сделать что-то подобное.
В итоге я использовал Плагин события jQuery от Ben Almans вместе с LocalScroll для получения желаемого результата, код выглядит так:
$(document).ready(function(){
$.localScroll({
hash:true,
target:'#container',
duration:500
});
$(window).hashchange( function(){
var hash = location.hash;
if (hash === ''){
location.hash = '#main';
}
$.localScroll.hash({
reset:false,
hash:true,
target:'#container',
duration:500
});
});
$(window).hashchange();
});
Приведенный выше код, несмотря на то, что я в некотором роде хакерский (не каламбур), когда дело доходит до кодирования, делает то, что я хочу в Firefox, Explorer и Opera. Однако в Chrome и Safari возникают разные проблемы.
В Chrome, в основном, прокрутка анимируется при нажатии на ссылку, но когда нажата кнопка браузера назад, она просто переходит на якорь без анимации перехода. Однако при ближайшем рассмотрении кажется, что она иногда оживляет кнопку «назад», но я не могу понять, почему она делает это только время от времени.
В Safari он переходит на привязку без анимации независимо от того, нажата ли ссылка или используется кнопка возврата.
Анимация работала в Safari до того, как я реализовал решение событий hashchange, когда код выглядел следующим образом:
$(document).ready(function() {
$.localScroll({
hash:true,
target:'#container',
duration:500
});
});
Кто-нибудь имеет какие-либо идеи относительно того, что вызывает эти проблемы в Chrome и Safari? Как я уже сказал, я дизайнер, а не программист, и это действительно расширяет мои возможности, поэтому не стесняйтесь указывать на любые ошибки, которые я допустил в приведенном выше коде, независимо от того, имеют ли они какое-либо отношение к рассматриваемой проблеме. или нет.
Также, спасибо Ариэлю и Бену за эти замечательные плагины.
РЕДАКТИРОВАТЬ: Хорошо, вот еще одна странная вещь, когда я загрузил сайт на тестовый сервер, который я запускаю локально, прокрутка по ссылке работает в Safari, даже если тот же самый код не работает, когда я запустить его вне сервера. В любом случае, ни Safari, ни Chrome не запускают анимацию при нажатии кнопки «Назад», поэтому проблема остается.