Почему при переключении табов происходит скачок вверх и как от этого избавиться?

Question

[lagudal]

Дано, есть сайт на Magento2 , на странице продукта табы для описания, характеристик и тд.
Один из табов, конкретно тот что с характеристиками - Mehr Informationen - содержит довольно много данных, сильно больше соседних табов. Если после этого таба кликнуть на любой соседний таб, то происходит скачок на позицию начала контента данного таба, при этом скрывается сам таб с названием.
Если контент этого таба сделать меньше, то скачка не происходит, но тут еще смешно другое:
на стандартной Magento2 теме - а именно стандартная тема является родительской для актуальной - с этими табами такой проблемы не происходит - при любой длине таба и при любых переключениях сами табы остаются в зоне видимости. При определенном позиционировании некоторые изменения позиций происходят, но они не так критичны.
Возможно, коллеги где то перемудрили что теперь сами не найдут где, и я уже не первый день не могу найти причину.
В общем, даже если от этого скачка не избавиться, то пусть прыгает не так высоко, ну чуть сдвинуть вниз, пихелов на 100, чтобы и табы стали видны.

Answer 1

[Eugene Chefranov]

Сама кнопка переключения является ссылкой и в атрибуте href имеется ссылка на якорь, по клику на таб вы прокручиваетесь к данному якорю. Для решения, можете попробовать в атрибуте href указать href="#0"

Comments

[lagudal]

я это вижу, так ведь и надо, например, чтобы по href="#additional" открывалось бы именно нужное содержимое. Если я его изменю, он же не откроется....И повторюсь, что стандартно с табами вроде бы так не происходит.

[Eugene Chefranov]

lagudal, еще можно попробовать для этих ссылок прописать в js .preventDefault()

Answer 2

[fallus]

Проблема в том, что на оригинале нет bootstrap, а тут есть.
Bootstrap использует подобную разметку. И обработчики собитий.

*bootstrap - паразит

Comments

[lagudal]

хм.. сейчас вот посмотрел темы от м2 коммерческие, в которых bootstrap встроен, так там несмотря на него такого поведения не наблюдается. CSS я посмотрел ничего вроде такого именно тут не добавляет, на всякий случай css bootstrap-овские отключил, ничего не изменилось.
Но вполне возможно что вы правы, если дело в обработке событий именно в js файлах bs- посмотрю, отпишусь.
А вообще интересно, где обработка этого события прописана и можно ли ее без удаления bs переписать, и если да то как?
пс. коллеги подключили bootstrap вместе с модулем от venustheme - точнее сказать с visual page builder-ом.
Этот билдер нужен для контент персонала, народ каждый день клепает лендинг страницы для sea, кодом они не смогут, так что скорее всего удалить bootstrap не дадут...

[fallus]

lagudal, в общем, если проблему нужно решить быстро, то вот. Это исправит проблему:

jQuery(document).on('click', 'a[data-toggle="trigger"]', function() {
  var parent = jQuery(this).parent();
  var content = parent.next('.content' + jQuery(this).attr('href'));

  parent.addClass('active').attr('aria-hidden', 'false');
  parent.siblings('[data-role="collapsible"]').removeClass('active').attr('aria-hidden', 'true');

  content.attr('aria-selected', 'true').show();
  content.attr('aria-selected', 'false').siblings('.content').hide()

  return false
});

Но чтобы найти источник проблемы, я бы стал на локали отключать один js за другим, чтобы локализовать её.

[lagudal]

fallus, решил вернуться - код выше проблемы не решает, к сожалению...
По поводу bootstrap. На проекте мне его отключать никто не дает, но попробовал так - установил на чистый инстанс magento полный фарш bootstrap - никаких скачков не наблюдается. Кроме bootstrap там еще много чего, некоторые скрипты мне так же не позволяют отключать, при этом требуют не затягивать с решением.

Подумалось вот о чем. Может какое-то событие можно попробовать добавить в addEventListener?
Пока приходит только довольно сложный вариант - отслеживать у-координату таба на экране, и по клику в addEventListener принудительно это значение - но может есть более простое решение?