Для создания плавного скролла к открывшемуся элементу в аккордеоне Bootstrap 4, вам потребуется использовать некоторые JavaScript-коды.
Первым шагом будет подключение библиотеки jQuery к вашему проекту. Вы можете включить следующую строку в разделе <head> вашей HTML-страницы:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Затем вам нужно будет добавить JavaScript-код для отслеживания события открытия и закрытия элементов аккордеона и выполнения плавного скролла к открывшемуся элементу. Ниже приведен пример такого кода:
// Отслеживание события открытия элемента аккордеона
$('.collapse').on('show.bs.collapse', function() {
var $this = $(this);
// Плавный скролл к открывшемуся элементу аккордеона
$('html, body').animate({
scrollTop: $this.offset().top
}, 500); // 500 миллисекунд указывают время анимации скролла
});
В этом коде мы используем метод on jQuery для отслеживания события show.bs.collapse (событие открытия элемента аккордеона) для всех элементов с классом collapse. Затем мы выполним плавный скролл к верхней границе открывшегося элемента с помощью метода animate jQuery, используя метод offset для определения верхней границы элемента.
Важно отметить, что эта реализация подразумевает использование аккордеона Bootstrap 4 с классом collapse, поэтому убедитесь, что ваш аккордеон имеет правильные классы. Если вы используете другую версию Bootstrap или другую реализацию аккордеона, вам может потребоваться внести некоторые изменения в этот код.
Если вы полностью реализовали этот код и он не работает, убедитесь, что ваш HTML и JavaScript правильно связаны между собой, и что ваши элементы аккордеона правильно настроены с классами Bootstrap.