Бутстрап-аккордеон: как избежать прокрутки страницы при сведении или разворачивании элементов

У меня неожиданная прокрутка страницы, когда вы пытаетесь свернуть или развернуть элементы аккордеона. Может быть, я просто делаю что-то неправильно с сеткой бутстрапа? Вот пример страницы:

Как я могу избежать этого раздражающего эффекта?
Доступен jsfiddle https://jsfiddle.net/Lfwvtyms/1/

   

Long long long long long long header header header header header header lng lasd lewq j

  • Item1
  • Item2
  • Item3
  • Item1
  • Item2
  • Item3
Div with fixed height here
my footer here

У меня была такая же проблема (прыжок в верхнюю часть при нажатии на ссылку, которая запускала коллапс), href="#" был изменен на href="javascript:void(0);" и он отлично работает (переключение без прокрутки вверх)

Замените свойства href на элементы a на # а не, например, #collapseOne

вместо этого:

  

сделай это

  

Я была такая же проблема. Оказывается, проблема href вызывает проблему. Если вы не хотите, чтобы страница вообще прокручивалась, когда вы ругались / расширялись, что я хотел, просто удалите href. Оставляя это как #, все же заставил экран прокручивать вверх.

не работал для меня:

   

работал:

  

Смотрите мое обновление здесь: https://jsfiddle.net/Lfwvtyms/5/

У меня была та же проблема, и я нашел решение с этим ответом на другом посту.

Ничто другое не сработало, за исключением того, что этот крошечный кусок Javascript добавлен в мой пользовательский .js-файл. Он плавно возвращает фокус на выбранный заголовок панели. Единственное, что я изменил в соответствии с моим дизайном, – это расстояние до вершины, на линии 6.

https://stackoverflow.com/a/38180220/4844273

 $('#accordion').on('shown.bs.collapse', function () { var panel = $(this).find('.in'); $('html, body').animate({ scrollTop: panel.offset().top - 130 }, 500); 

Вы можете переопределить обработчик кликов и использовать метод preventDefault() для события click:

 $('.aHandler').click( function(event) { event.preventDefault(); ... }); 

Где «aHandler» – это class в ваших тегах «a»: ... или любой другой допустимый селектор jquery .

$('.panel-group').on('click', function(){ $('html,body').stop(); });

Это определенно будет работать, если у вас нет вариантов.

Другой вариант – использовать кнопки вместо привязанных ссылок, так что в первую очередь не запускается href . Например, вместо первого :

  

Существует множество примеров, использующих вместо в этой документации .