ПРИМЕР
Прежде всего, вот мой код и проблема:
http://www.nathanstpierre.com/MBX/showoff.html
ВЫПУСК
Так что я вижу, когда вы нажимаете кнопки слева, окно прокручивается до соответствующего заголовка. В любом браузере, кроме Firefox (включая ... IE gasp ), это очень гладко. Однако, если вы уменьшите высоту окна, оно станет плавным на всех компьютерах. Я уже пробовал это на нескольких компьютерах и в IE 7-8, Google Chrome, Safari и Firefox 3.5. Я убрал все биты графики и цвета на странице, так что это не проблема. Я избавился от боковой панели, которая следует за вами, это не так.
ТЕОРИЯ
Я думаю, что плагин JQuery замедления вычисляет расстояние, которое вам нужно пройти, а затем делит количество пикселей, которые необходимо переместить на единицу указанной длительности (скажем, 300 пикселей за 30 миллисекунд, так что 10 пикселей / мс). Кажется, что любой другой браузер может сделать этот плавный переход, но, возможно, гранулярность, обеспечиваемая событием прокрутки окна, недостаточно сжата, чтобы Firefox мог сделать это гладким? Или, возможно, я использую неправильный плагин замедления или неверные настройки.
КОД
$("#sidenav a").click(function () {
$("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
$(this).animate({"color":"#fff"},{"duration":400});
clicktarget=$(this).attr("href");
$("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
return false;
});
ЛОГИКА
Добавьте прослушиватель событий для каждого тега в sidenav onClick. Это позволит получить смещение (). Top элемента в документе с тем же идентификатором, что и атрибут href этой ссылки, а затем анимировать из текущего scrollTop в offset (). Top этого элемента. Логика логична и работает плавно в любом браузере, КРОМЕ Firefox ... насколько я могу судить.
ПЛЕА
Что я делаю не так? Это ошибка?
Спасибо!
ОБНОВЛЕНИЕ
Ну, я не могу с чистой совестью выбрать ни один из ответов, представленных здесь, поскольку ни один из них на самом деле не дал решения проблемы, поэтому, если вы следуете этому, выберите своего фаворита, и награда перейдет к одному с наибольшим количеством голосов.
Похоже, проблема заключается в том, что Firefox а) обеспечивает прозрачность и б) обрабатывает события прокрутки. Потенциально, при достаточной мощности процессора, это не проблема, но меня огорчает то, что IE (из всех браузеров) способен воспроизводить это нормально на слабом оборудовании. Я подойду к Mozilla и выясню, есть ли у них что-нибудь сказать по этому поводу.
Для дополнительного назидания бесплатно предоставляются следующие материалы:
С прозрачностью
Без прозрачности
РЕДАКТИРОВАТЬ: Таким образом, вопрос был дан ответ, но теперь я не могу выбрать его. Кто-нибудь знает, что с этим?
ФИНАЛЬНОЕ ОБНОВЛЕНИЕ
Прошло достаточно времени, чтобы они вернули мне награду, и я выбрал правильный ответ. Похоже, box-shadow и несколько других эффектов вызывают некоторые проблемы с прокруткой в Firefox из-за способа их рендеринга. FF 4.0 + справляется с этим лучше, но у некоторых компьютеров все еще есть проблемы. Это отличная возможность для людей, реализующих CSS3: протестируйте взаимодействие во всех браузерах и посмотрите, оправданы ли затраты на производительность.