Эта функция работает отлично. Прокручивает тело до желаемого смещения контейнера
function scrolear(destino){
var stop = $(destino).offset().top;
var delay = 1000;
$('body').animate({scrollTop: stop}, delay);
return false;
}
Но не в Firefox. Зачем?
-РЕДАКТИРОВАТЬ-
Для обработки двойного триггера в принятом ответе я предлагаю остановить элемент перед анимацией:
$('body,html').stop(true,true).animate({scrollTop: stop}, delay);
Ответы:
Firefox размещает переполнение на
html
уровне, если он не предназначен для поведения по-другому.Чтобы заставить его работать в Firefox, используйте
Рабочий пример
Решением CSS было бы установить следующие стили:
Я предполагаю, что решение JS будет наименее инвазивным.
Обновить
Большая часть обсуждения ниже фокусируется на том факте, что анимация
scrollTop
двух элементов вызовет обратный вызов дважды. Функции обнаружения браузеров были предложены и впоследствии устарели, а некоторые, возможно, довольно надуманы.Если обратный вызов идемпотентен и не требует больших вычислительных мощностей, его повторный запуск может быть полной проблемой. Если множественные вызовы обратного вызова действительно являются проблемой, и если вы хотите избежать обнаружения функции, может быть более простым обеспечить принудительное выполнение обратного вызова только один раз из обратного вызова:
источник
$(jQuery.browser.webkit ? "body": "html").animate(...);
$(jQuery.browser.mozilla ? "html" : "body").animate(...);
. Было бы замечательно не использовать поиск по браузеру, а обнаружение функций. Не уверен, как сделать обнаружение функций в CSSjQuery.browser
что устарела и отсутствует в последней версии jQuerywindow.scroll
что не оживляет. Вы, конечно, могли бы бросить свою вещь с интервалами иscrollBy
. Если вы хотите добавить ослабление к этому, у вас неожиданно появляется много кода для довольно незначительного аспекта вашего продукта.Было бы неплохо обнаружить объекты, а затем анимировать их на одном поддерживаемом объекте, но не существует однострочного решения. В то же время, вот способ использовать обещание сделать один обратный вызов за выполнение.
ОБНОВЛЕНИЕ: вот, как вы могли бы вместо этого использовать функцию обнаружения. Этот кусок кода должен быть оценен перед вызовом анимации:
Теперь используйте переменную, которую мы только что определили как селектор для анимации прокрутки страницы, и используйте обычный синтаксис:
источник
html
а иногда возвращаласьbody
. Вот мой код после объявления функцииvar scrollTopElement; setTimeout( function() { scrollTopElement = getScrollTopElement(); console.log(scrollTopElement); }, 1000);
Спасибо, хотя, это решило мою проблему.html
вместо того,body
как предполагалось. Это только если вы прокручиваете всю страницу вниз и перезагружаете, иначе это работает.Я потратил целую вечность, пытаясь понять, почему мой код не работает -
Проблема была в моем CSS -
auto
Вместо этого я установил его (и меня беспокоило, почему он был установлен100%
в первую очередь). Это исправило это для меня.источник
Вы можете избежать проблемы с помощью плагина - точнее, моего плагина :)
Серьезно, даже несмотря на то, что основная проблема уже давно решена (разные браузеры используют разные элементы для прокрутки окон), есть довольно много нетривиальных проблем, которые могут сбить вас с толку:
body
иhtml
имеет свои проблемы ,Я явно предвзят, но jQuery.scrollable самом деле - хороший выбор для решения этих проблем. (На самом деле, я не знаю ни одного другого плагина, который обрабатывает их все.)
Кроме того, вы можете вычислить целевую позицию - ту, к которой вы прокручиваете - в пуленепробиваемом виде с помощью
getScrollTargetPosition()
функции в этом списке. .Все это оставит вас с
источник
Остерегайтесь этого. У меня была такая же проблема, ни Firefox, ни Explorer с прокруткой
Так что я использовал, как сказал Дэвид
Отлично, это сработало, но новая проблема, поскольку есть два элемента, body и html, функция выполняется дважды, то есть, X выполняется два раза.
пробовал только с 'html', и Firefox и Explorer работают, но теперь Chrome не поддерживает это.
Так что нужно тело для Chrome, и HTML для Firefox и Explorer. Это ошибка JQuery? не знаю
Просто остерегайтесь вашей функции, так как она будет выполняться дважды.
источник
Я бы порекомендовал не полагаться
body
ниhtml
на более портативное решение. Просто добавьте в тело элемент div, предназначенный для хранения прокручиваемых элементов, и стилизуйте его так, чтобы включить полноразмерную прокрутку:(при условии , что
display:block;
иtop:0;left:0;
являются по умолчанию , который соответствует вашей цели), а затем использовать$('#my-scroll')
для анимации.источник
Это реальная сделка. Работает на Chrome и Firefox без нареканий. Это даже грустно, что некоторые невежественные голосуют против меня. Этот код буквально работает отлично, как и во всех браузерах. Вам нужно только добавить ссылку и указать идентификатор элемента, который вы хотите прокрутить, в href, и это работает без указания чего-либо. Чистый многоразовый и надежный код.
источник
Я столкнулся с той же проблемой совсем недавно и решил ее следующим образом:
И ты юпи !!! это работает во всех браузерах.
в случае, если позиционирование не является правильным, вы можете вычесть значение из offset () .top, выполнив это
источник
Для меня проблема заключалась в том, что firefox автоматически переходил на якорь с атрибутом name, совпадающим с именем хеша, которое я вставил в URL. Хотя я поставил .preventDefault (), чтобы предотвратить это. Таким образом, после изменения атрибутов имени Firefox не автоматически переходил к якорям, а выполнял анимацию правильно.
@ Тони Извините, если это не понятно. Дело в том, что я изменил хэши в URL, например, www.someurl.com/#hashname. Тогда у меня был, например, такой якорь,
<a name="hashname" ...></a>
к которому jQuery должен прокручиваться автоматически. Но этого не произошло, потому что он перешел прямо на якорь с соответствующим атрибутом имени в Firefox без анимации прокрутки. После того как я изменил атрибут name на что-то отличное от имени хеша, например наname="hashname-anchor"
, прокрутка сработала.источник
Для меня это было предотвращением добавления идентификатора в момент анимации:
Как избежать:
Подготовьте идентификатор заранее и сделайте это вместо этого:
Исправлено в FF. (Дополнения CSS не имели никакого значения для меня)
источник
Надеюсь, это работает.
источник