CSS/Javascript Auto Scroll To Top

Question

В настоящее время я работаю над простым (или так я думал) слайд-меню для настольных и мобильных версий веб-сайта, над которым я работаю. Я пытаюсь сделать это в CSS только, если это возможно. В настоящее время CSS я использую следующим образом:

#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; } 
#menu:hover {max-height: 75%; overflow: auto} 

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

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

Я хотел бы найти способ либо с помощью CSS, либо с помощью Javascript, чтобы автоматически прокручивать этот div вверх, когда пользователь нажимает/выворачивает из меню, поэтому он все равно будет отображать значок меню + логотип вместо случайного текст меню.

Мне нравится, как это работает, но не выдерживает прокрутки на небольших экранах.

Answer 1

Возможно, в вашей идее может возникнуть какая-то неловкость, которая может потребоваться только для редизайна, я, конечно, никогда не замечал, что такое меню работает так.

Но код JQuery для прокрутки к вершине этого:

$("html, body").animate({ 
    scrollTop: 0 
}, 600); 

Где 600, сколько времени занимает в мс. Вам придется обернуть это в функцию click() или что-то подобное, чтобы оно срабатывало, когда кто-то нажимал опцию меню. Например:

$('#menu a').click(function() { 
    $("html, body").animate({ 
     scrollTop: 0 
    }, 600); 
}); 

И, конечно, все этот код должны быть обернуты в $ (документ) .ready() (основная настройка Jquery) Я знаю, что вы не упомянули JQuery в вашем вопросе, но это популярный подход к решению таких проблем.