Как поднять на верх страницы с помощью scrollTo и фиксированного меню?

Question

[toha_man]

Друзья. Столкнулся с такой проблемкой небольшой. Допустим у нас есть фиксированное меню в шапке страницы:

<div class="top-menu">
  <ul><li>.....</li></ul>

.top-menu {
  position:fixed; 
  width:100%;
  top:0;left:0;
  z-index:5;
}

На него, с помощью jquery, навешена бутстраповская функция scrollspy, которая отслеживает скролл страницы и если в области видимости есть элемент с таким же id как и у элемента списка списка в меню, т.е.

<section id="p1">...</section>, а в меню
<li><a href="#p1">...</a>

добавляет класс active к элементу меню за счет чего можно это дело разукрасить. Всё бы хорошо. Но не удается реализовать пункт меню наверх из-за того что меню занимает верх и скрол не происходит до конца, даже если повесить якорь на

Можно вручную повесить скролл к позициям 0 , но тогда не будет добавления класса active через бутстрап. А если добавлять класс , то все равно это работает криво с бутстраповской анимацией.

Answer 1

[Виталий]

Обычно в меню не делают кнопки "наверх" ее проявляют снизу когда человек спустился ниже по странице. Но если я Вас правильно понял, то посмотрите здесь на реализацию. https://jsfiddle.net/Poter/vdf5nrot/

Comments

[toha_man]

Верно говорите, но на некоторых сайтах такой блок появляется почти сразу как вы только немного заскролили вниз. У меня же фиксированное меню сверху в котором изначально есть такая кнопка.

В примере который вы скинули нету фикс. меню. Я плохо объяснил проблему.

Проблема возникает потому что у нас есть фиксированное меню, скажем 30px. Следующий html элемент располагается соот-но на 30px ниже, и теперь кнопке "На вверх" не остается другого элемента для перехода как тот что имеет отступ сверху 30px. Т.о. скролл до конца не доходит.

Я решил тем, что в JS перехватил ссылку на верх и заменил на свои координаты (0,0). Под рукой кода нет, но если кому то будет надо выложу

[Виталий]

toha_man, У меня в примере фиксированное меню, и для того чтобы скролл доходил до самого конца, в скрипте мы отнимаем высоту меню.