2016-01-25 3 views
0

Я создаю меню для мобильного телефона, которое появляется при щелчке по элементу в подменю. Проблема в том, что если я это сделаю, когда страница прокручивается немного, страница прокручивается вверх ... (открывать или закрывать подменю).Почему при открытии страницы подменю прокручивается вверх?

Это, очевидно, не происходит, когда страница не прокручивается

Это код:

http://jsfiddle.net/qsq4y9d8/3/

это CSS пункта подменю

.lisottomenu { 
    letter-spacing: 0.02em; 
    display: block; 
    background: #E4BF85; 
    border-top: 1px solid #fff; 
    font-size: 14px; 
    list-style-type: none; 
    width:100%; 
} 

это CSS пункта родительский

ul li.leaf { 
    background: #646464 none repeat scroll 0 0; 
    border-top: 1px solid #a0a0a0; 
    display: block; 
    font-size: 15px; 
    letter-spacing: 0.02em; 
    list-style-type: none; 
    position: relative; 
} 

Это проблема:

enter image description here

(проблема является автоматической прокрутки)

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

+0

Это не прокрутка вверх, это естественное поведение браузера: когда страница может содержать весь материал после прокрутки, она возвращается к исходному состоянию(), которое заставляет его отображаться как прокрутка вверх –

+0

я не понимаю ... см. этот сайт по мобильному https://unata.com/, если я открою подменю и после этого с firebug я скрыл подменю (display: none) страница doesn.'t прокрутки .... однако ссылки в моем jsfiddle – Borja

ответ

1

за мой комментарий:

Любой <a> с HREF, содержащей «#» помещает в URL, который, в свою очередь ищет пустой якорь #. Поскольку он не существует, по умолчанию он прокручивается вверх.

Удалить «#» из ваших ссылок и не будет прокручиваться к началу больше

Изменить

<a href="#">Link</a> 

в

<a href="">Link</a> 

и он должен остановить прокрутку к началу ,

0

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

Это именно то, как браузер реагирует на такой вид изменения высоты.

Одним из решений было бы присвоить боковое меню max-height и overflow-y: прокрутить.

#content, #sidebar-first { 
    display: inline; 
    float: left; 
    position: relative; 
    overflow-y: scroll; 
    max-height: 370px; 
} 

Таким образом, при открытии sidemenus это не повлияет на высоту документа.

скрипка - http://jsfiddle.net/qsq4y9d8/9/

+0

Нет, проблема также открыта подменю элемента «madagascar»: прокрутите страницу и щелкните элемент, а затем нажмите еще раз, чтобы закрыть его, и страница прокрутки страницы :(почему ?????? подменю «madagascar» not делая все окно выше – Borja

0

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

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

Смежные вопросы