Реализация Scroll to Element после AJAX сабмита формы

Данное решение у меня родилось, когда столкнулся с задачей добавления плавного Scroll'a к началу формы после после AJAX сабмита. Проект, для которого делался данный таск, был откровенным "амном", поэтому реализовывать через Drupal AJAX сommands не было никакого смысла. Если более подробно о форме, то это была Webform с примотанным модулем Webform Ajax (тоже его недолюбливаю).

Решил попробовать обойтись чистым JS кодом, несмотря на то, то форма содержала элемент загрузки файлы — это еще один AJAX какбэ. В результате получилось вот такое компактное решение:

  1. (function ($) {
  2. Drupal.behaviors.MyModuleScroll = {
  3. attach: function (context, settings) {
  4. // Scroll to the top of a Webform after a submit.
  5. if (typeof $(context).attr('id') == "string" && $(context).attr('id').startsWith('webform-ajax-wrapper-330')) {
  6. $('html, body').animate({ scrollTop: $('h1').offset().top - 50 }, 500);
  7. }
  8. }
  9. };
  10. })(jQuery);

Вся проблема тут заключается в том, чтобы разобраться с переменной context, дабы реагировать только на сабмит всей формы, а остальные AJAX'ы игнорировать. Быстро, удобно и без заморочек с Drupal AJAX commands.

Комментарии

Аватар пользователя Анна
Анна

Спасибо! То что нужно..

Добавить комментарий

 888  Y88b   d88P                          
888 Y88b d88P
888 Y88o88P
888 Y888P 88888b. 888 888 888
888 888 888 "88b 888 888 888
888 888 888 888 888 888 888
888 888 888 d88P Y88b 888 d88P
888 888 88888P" "Y8888888P"
888
888
888
Зарегистрируйтесь для добавления материалов без проверки.