Реализация 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.

Комментарии

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

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

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

 d8b  888b     d888  8888888b.            
Y8P 8888b d8888 888 "Y88b
88888b.d88888 888 888
888 888Y88888P888 888 888 88888b.
888 888 Y888P 888 888 888 888 "88b
888 888 Y8P 888 888 888 888 888
888 888 " 888 888 .d88P 888 d88P
888 888 888 8888888P" 88888P"
888
888
888
Зарегистрируйтесь для добавления материалов без проверки.