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

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

  .d8888b.             888    d8P   888       888 
d88P Y88b 888 d8P 888 o 888
888 888 888 d8P 888 d8b 888
Y88b. d888 .d88888 888d88K 888 d888b 888
"Y888P888 d88" 888 8888888b 888d88888b888
888 888 888 888 Y88b 88888P Y88888
Y88b d88P Y88b 888 888 Y88b 8888P Y8888
"Y8888P" "Y88888 888 Y88b 888P Y888
888
888
888
Зарегистрируйтесь для добавления материалов без проверки.