Как исправить скрол в меню по клику?

Ссылка скопирована
JavaScript
23 января 2026 1 ответ

У меня есть блок с списком ul в котором есть саб меню, саб меню изначально скрыто и должно раскрывается по клику, а так же заголовок меню должен скролится вверх.
Пример кода:

<div class="burger_menu"> 	<div class="burger_block">         <ul id="top-burger" class="burg_me top-burger-m">             <li class="menu-item"><a href="/#" aria-current="page">Станица 1</a>                 <ul class="sub-menu">                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>                 </ul>             </li>             <li class="menu-item"><a href="/#" aria-current="page">Станица 2</a>                 <ul class="sub-menu">                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>                 </ul>             </li>             <li class="menu-item"><a href="/#" aria-current="page">Станица 3</a>                 <ul class="sub-menu">                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>                 </ul>             </li>             <li class="menu-item"><a href="/#" aria-current="page">Станица 4</a>                 <ul class="sub-menu">                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>                 </ul>             </li>             <li class="menu-item"><a href="/#" aria-current="page">Станица 5</a>                 <ul class="sub-menu">                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a>                     <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a>                 </ul>             </li>         </ul>     	</div> </div>

<div class="burger_menu"> <div class="burger_block"> <ul id="top-burger" class="burg_me top-burger-m"> <li class="menu-item"><a href="/#" aria-current="page">Станица 1</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a> </ul> </li> <li class="menu-item"><a href="/#" aria-current="page">Станица 2</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a> </ul> </li> <li class="menu-item"><a href="/#" aria-current="page">Станица 3</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a> </ul> </li> <li class="menu-item"><a href="/#" aria-current="page">Станица 4</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a> </ul> </li> <li class="menu-item"><a href="/#" aria-current="page">Станица 5</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 1</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 2</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 3</a> <li class="sub-menu-item"><a href="/#" aria-current="page">Станица 4</a> </ul> </li> </ul> </div> </div>

jQuery('#top-burger li').click(function() {          jQuery(this).toggleClass('actt');          jQuery('.actt').not(jQuery(this)).removeClass('actt');         jQuery('.burger_menu').scrollTop(jQuery(this).position().top);     });

jQuery('#top-burger li').click(function() { jQuery(this).toggleClass('actt'); jQuery('.actt').not(jQuery(this)).removeClass('actt'); jQuery('.burger_menu').scrollTop(jQuery(this).position().top); });

.burger_menu {     display: flex;     flex-direction: column;     align-items: flex-start;     width: 480px;     height: 100vh;     position: absolute;     right: 0;     top: 60px;     flex-wrap: nowrap;     z-index: -1;     overflow: hidden; } .burger_menu.act {     z-index: 8;     background: #fff;     overflow-y: auto; } .burger_block {     width: 480px;     height: 100%;     display: flex;     flex-direction: column;     flex-wrap: nowrap;     background: #fff;     position: absolute;     margin-left: 480px;     transition: 0.2s all ease;     -webkit-transition: 0.4s all ease; } .burger_menu.act .burger_block {     margin-left: 0;     transition: 0.2s all ease;     -webkit-transition: 0.4s all ease;     position: relative; } #top-burger {     margin: 40px 0 50px;     padding-left: 50px;     list-style: none; }  #top-burger li {     font-size: 20px;     color: #6d6d6d;     max-width: 380px;     width: 100%;     display: block;     margin-bottom: 20px;     position: relative; } #top-burger li .sub-menu {     padding-left: 30px;     overflow: hidden;     display: block;     list-style: none;     max-height: 0;     transition: 0.2s all ease;     -webkit-transition: 0.4s all ease; } #top-burger li.actt .sub-menu {     max-height: 1000px; }

.burger_menu { display: flex; flex-direction: column; align-items: flex-start; width: 480px; height: 100vh; position: absolute; right: 0; top: 60px; flex-wrap: nowrap; z-index: -1; overflow: hidden; } .burger_menu.act { z-index: 8; background: #fff; overflow-y: auto; } .burger_block { width: 480px; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; background: #fff; position: absolute; margin-left: 480px; transition: 0.2s all ease; -webkit-transition: 0.4s all ease; } .burger_menu.act .burger_block { margin-left: 0; transition: 0.2s all ease; -webkit-transition: 0.4s all ease; position: relative; } #top-burger { margin: 40px 0 50px; padding-left: 50px; list-style: none; } #top-burger li { font-size: 20px; color: #6d6d6d; max-width: 380px; width: 100%; display: block; margin-bottom: 20px; position: relative; } #top-burger li .sub-menu { padding-left: 30px; overflow: hidden; display: block; list-style: none; max-height: 0; transition: 0.2s all ease; -webkit-transition: 0.4s all ease; } #top-burger li.actt .sub-menu { max-height: 1000px; }

На данный момент код jQuery срабатывает, но только добавляет класс "actt" но скрол не происходит, скрол происходит только по второму клику.
Уже всю голову себе сломал, не понимаю как это исправить?

Дополнительно:

Вопрос решен, код исправно работал, проблема была в маленьком списке, так же стоит добавить задержку выполнения скрипта setTimeout.
И все работает.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Виктор Sys Ответ

Для исправления скролла в меню по клику, вам необходимо использовать JavaScript. Вот пример кода, который позволит вам реализовать это:

// Находим все ссылки в меню
var links = document.querySelectorAll('a[href^="#"]');
 
// Добавляем обработчик события клика на каждую ссылку
links.forEach(function(link) {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // Отменяем стандартное поведение ссылки
 
        var targetId = this.getAttribute('href').substring(1); // Получаем id элемента, к которому нужно прокрутить страницу
        var targetElement = document.getElementById(targetId); // Находим этот элемент на странице
 
        if (targetElement) {
            var offsetTop = targetElement.offsetTop; // Получаем расстояние от верхней границы страницы до элемента
            window.scrollTo({
                top: offsetTop,
                behavior: 'smooth' // Добавляем плавную прокрутку
            });
        }
    });
});

// Находим все ссылки в меню var links = document.querySelectorAll('a[href^="#"]'); // Добавляем обработчик события клика на каждую ссылку links.forEach(function(link) { link.addEventListener('click', function(e) { e.preventDefault(); // Отменяем стандартное поведение ссылки var targetId = this.getAttribute('href').substring(1); // Получаем id элемента, к которому нужно прокрутить страницу var targetElement = document.getElementById(targetId); // Находим этот элемент на странице if (targetElement) { var offsetTop = targetElement.offsetTop; // Получаем расстояние от верхней границы страницы до элемента window.scrollTo({ top: offsetTop, behavior: 'smooth' // Добавляем плавную прокрутку }); } }); });

Этот код будет добавлять обработчик события клика на все ссылки в меню, которые имеют хэш-ссылку. При клике на ссылку страница будет плавно прокручиваться к соответствующему элементу на странице.

Убедитесь, что у ваших элементов на странице есть уникальные id, к которым вы сможете обращаться в JavaScript. Также не забудьте добавить стили для плавной прокрутки страницы в ваш CSS файл:

html {
    scroll-behavior: smooth;
}

html { scroll-behavior: smooth; }

Этот код поможет вам исправить скролл в меню по клику и добавит плавную анимацию прокрутки страницы к соответствующему элементу.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ CSS Как реализовать table на основе grid? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ