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

Question

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

Answer 1

Не перехожу по ссылкам вида #ancor, поэтому можно и не ставить якоря, а переходить непосредственно к нужным элементам, типа статей или заголовков.

Если очень хочется, то if(nearest) location.hash = nearest.name;

Дополнительно обратите внимание на возможность добавить к прокрутке пиксели (в данном случае 10) ибо приходится видеть как на серьезных сайтах подобные ссылки на якоря прокручивают страницу пряча целевой элемент за верхним меню = fixed. Так есть возможность указать высоту это меню и чуть больше.

// Устанавливаем слушателя на кнопку
document.getElementById('toup').addEventListener('click', goToNext);
// Получаем все якоря

let ancors = document.querySelectorAll('a[name]');

function goToNext(){
  // Получаем прокрутку страницы
  let scroll = window.pageYOffset;
  // Получаем первый ancor, который выше scroll из ближайших
  let nearest = [...ancors].sort((a,b) => Math.abs(scroll - a.offsetTop) - Math.abs(scroll - b.offsetTop))
                           .find(a => scroll > a.offsetTop);
  // Используем относительную прокрутку, чтобы не менять scroll по X
  // Добавляем 10px чтобы элемент не был прижат вплотную
  if(nearest) window.scrollBy(0, nearest.offsetTop - scroll - 10);
  //if(nearest){ // ЕСЛИ НАДО МЕНЯТЬ HASH В АДРЕСЕ
    //location.hash = nearest.name;
    //window.scrollBy(0, -10);
  //} ДОП ПРОКРУТКА ДЛЯ ЭКВИВАЛЕНТНОСТИ ВАРИАНТОВ ПО ЭФФЕКТУ
}

a[name] {
  display: block;
  margin-bottom: 200px;
}

button {
  position: fixed;
  bottom: 0;
  right: 0;
}

<a name="first">Первый</a>
<a name="second">Второй</a>
<a name="third">Третий</a>
<a name="fourth">Четвертый</a>
<a name="fifth">Пятый</a>
<button id="toup">
ВВерх
</button>

БЛОГ НА HUSL

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

Ответы (1 шт):