Почему у меня не работает анимация scrollTo?

Question

Почему у меня не работает анимация scrollTo?

0

Я пытаюсь активировать кусок javascript, когда экран меньше определенной ширины страницы. Для этого я добавил немного медиа-запросов в скрипт:

 <script>
    var jmediaquery = window.matchMedia( "(max-width: 580px)" );
       if (jmediaquery.matches) {
       $("#navigation a").click(function() {
           var navigationId = $(this).attr("href");
           $("html, body").animate({scrollTop: $(navigationId).offset().top -60},"slow");
           return false;
       });
    }
</script>

Однако, когда я запускаю его, ни анимация не работает, ни медиазапись не работают. Почему это?

EDIT: JSFiddle

Чтобы развернуть "не работает", конечная цель состоит в том, чтобы функция scrollTo работала только тогда, когда размер экрана меньше указанной ширины. Если выше указанной ширины функция не применяется. Мой код выше, кажется, отключает анимацию и работает независимо от размера экрана.

EDIT 2: Добавлено ("html, body") как было предложено A.Wolf.

user2898276 09 май 2014, в 15:47

Источник

0

Возможно, ваш jmediaquery.matches пустой или нулевой. Можете ли вы создать демо на jsfiddle.net?
DhruvPathak 09 май 2014, в 13:50
0

Также я бы определенно добавил console.log() чтобы проверить, каково это начальное значение смещения.
Pointy 09 май 2014, в 13:50
0

Опишите что значит не работает ??? Кстати, вы должны использовать для обработки FF: $('html, body').animate(...); РЕДАКТИРОВАТЬ: работает здесь: jsfiddle.net/DrGLd
A. Wolff 09 май 2014, в 13:52
0

@ A.Wolff, когда я говорю, что анимация и медиа-запрос работают точно, это означает, что анимация прокрутки не отвечает на медиа-запрос. Нет?
user2898276 09 май 2014, в 14:04
0

Вы не устанавливаете медиа-запрос, просто проверяете, соответствует ли медиа-запрос. Я не уверен, что понимаю, что вы имеете в виду ... Когда я прошу вас описать, что не работает, я имею в виду, например: срабатывает ли событие click? Если нет, то у вас уже есть свой ответ ниже, потому что ваш отправленный код не является неправильным. PS: конечно, если вы хотите использовать jQuery, вы должны включить его: jsfiddle.net/c7wnp/2
A. Wolff 09 май 2014, в 14:07
0

И снова, чтобы поддерживать FF, вам нужно: $('html, body').animate(...);
A. Wolff 09 май 2014, в 14:12
0

@ A.Wolff мои извинения. Просто немного смущен. Чтобы уточнить цель. Когда человек просматривает сайт на мобильном телефоне, активируется функция прокрутки. Когда они просматривают его на рабочем столе, это не так.
user2898276 09 май 2014, в 14:12
0

@ user2898276 Я вполне уверен, что ваш код уже работает (если не тестирует его в Firefox), просто вложите код в обработчик готовых документов или установите его внизу страницы непосредственно перед </body>
A. Wolff 09 май 2014, в 14:13

Показать ещё 6 комментариев

Теги:

javascript

jquery

media-queries

3 ответа

Ещё вопросы

Возможно, ваш jmediaquery.matches пустой или нулевой. Можете ли вы создать демо на jsfiddle.net?
Также я бы определенно добавил console.log() чтобы проверить, каково это начальное значение смещения.
Опишите что значит не работает ??? Кстати, вы должны использовать для обработки FF: $('html, body').animate(...); РЕДАКТИРОВАТЬ: работает здесь: jsfiddle.net/DrGLd
@ A.Wolff, когда я говорю, что анимация и медиа-запрос работают точно, это означает, что анимация прокрутки не отвечает на медиа-запрос. Нет?
Вы не устанавливаете медиа-запрос, просто проверяете, соответствует ли медиа-запрос. Я не уверен, что понимаю, что вы имеете в виду ... Когда я прошу вас описать, что не работает, я имею в виду, например: срабатывает ли событие click? Если нет, то у вас уже есть свой ответ ниже, потому что ваш отправленный код не является неправильным. PS: конечно, если вы хотите использовать jQuery, вы должны включить его: jsfiddle.net/c7wnp/2
И снова, чтобы поддерживать FF, вам нужно: $('html, body').animate(...);
@ A.Wolff мои извинения. Просто немного смущен. Чтобы уточнить цель. Когда человек просматривает сайт на мобильном телефоне, активируется функция прокрутки. Когда они просматривают его на рабочем столе, это не так.
@ user2898276 Я вполне уверен, что ваш код уже работает (если не тестирует его в Firefox), просто вложите код в обработчик готовых документов или установите его внизу страницы непосредственно перед </body>

Ted · Answer 1 · 2014-05-09T11-39-00.000Z

Закройте его в document.ready(). Возможно, элемент управления еще не загружен.

В качестве альтернативы вы можете попробовать что-то вроде этого:

$(document).ready(function () {
// scroll to error if present
if ($('div.error').length > 0) $("html, body").animate({ scrollTop: $(document).height() }, "fast");
});

EDIT: Я забыл добавить, что приведенный выше код предполагает, что сообщение об ошибке находится в нижней части страницы.

user2898276 · Answer 2 · 2014-05-09T14-12-00.000Z

Это сочетание всех ответов и предложений, которые решили мою проблему. Обратите внимание, что внизу находится страница внизу, </body>

<script type="text/javascript">
          $("#navigation a").click(function() {
       var jmediaquery = window.matchMedia( "(max-width: 480px)" );
       if (jmediaquery.matches) {
           var navigationId = $(this).attr("href");
           $("html, body").animate({scrollTop: $(navigationId).offset().top - 20},"slow");
           return false;
       } else {
           return false;
       }
   });
</script>

workabyte · Answer 3 · 2014-05-09T10-54-00.000Z

может захотеть запустить этот код, когда страница будет загружена.

$(function(){
      /*
        your code here
      */
});