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

Комментарии

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

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

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

           d888      888888   .d8888b.  
d8888 "88b d88P Y88b
888 888 Y88b.
888d888 888 888 "Y888b.
888P" 888 888 "Y88b.
888 888 888 "888
888 888 88P Y88b d88P
888 8888888 888 "Y8888P"
.d88P
.d88P"
888P"
Зарегистрируйтесь для добавления материалов без проверки.