Реализация 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   .d8888b.   888        .d8888b.  
888 d88P Y88b 888 d88P Y88b
888 888 888 888 888
.d88888 888d888b. 888 888
d88" 888 888P "Y88b 888 888 88888
888 888 888 888 888 888 888
Y88b 888 Y88b d88P 888 Y88b d88P
"Y88888 "Y8888P" 88888888 "Y8888P88


Зарегистрируйтесь для добавления материалов без проверки.