Навигационные кнопки вверх/вниз для Blogger: Кнопки прокрутки («Наверх»/«Вниз») в Blogger

Кнопки вниз и вверх для Blogger

Сегодня поговорим о кнопках для быстрого перемещения вверх/вниз, устанавливаемых на блоге. При нажатии на кнопку вверх или вниз осуществляется плавная прокрутка странички в заданном направлении.

Зачем вашему блогу кнопка «Вверх-Вниз», или Как не заставить читателя страдать?

• Ускоряет навигацию — на длинных страницах кнопка позволяет мгновенно вернуться в начало (например, к меню или оглавлению) или быстро перейти в конец (к комментариям, форме и т.д.)
• Спасение для мобильных пользователей — на смартфонах полоса прокрутки часто скрыта, а экраны длинные. Кнопки «Наверх» позволяют вернуться в начало или в конец страницы одним касанием.

Для Blogger:

1. самый простой способ добавить кнопки «Вверх» и «Вниз» — использовать гаджет HTML/JavaScript. 
2. вставить код кнопок «Вверх» и «Вниз» напрямую в шаблон темы Blogger ( браузер обрабатывает такие скрипты быстрее, а значит лучше влияет на скорость загрузки блога).

Показать статью

Код кнопок для вставки в гаджет HTML/JavaScript в поле Содержание, поле Название можно оставить пустым.

<!-- Кнопки навигации для Blogger -->
<style>
  #scrollUpDown {
    position: fixed;
    right: 20px;
    bottom: 160px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
  }
  .scroll-btn {
    cursor: pointer;
    background-color: rgba(255, 204, 0, 0.7);
    color: #000;
    border: none;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    user-select: none;
    transition: all 0.3s ease;
    opacity: 1;
    font-family: sans-serif;
  }
  .scroll-btn:hover {
    background-color: rgba(255, 204, 0, 1);
  }
  .scroll-btn.hidden {
    opacity: 0;
    pointer-events: none;
  }

</style>

<div id='scrollUpDown'>
  <button class='scroll-btn' id='scrollUp' title='Наверх'>&#9650; Вверх</button>
  <button class='scroll-btn' id='scrollDown' title='Вниз'>&#9660; Вниз</button>
</div>

<script type='text/javascript'>

  (function() {
    var up = document.getElementById('scrollUp');
    var down = document.getElementById('scrollDown');

    function updateButtons() {
      var st = window.pageYOffset || document.documentElement.scrollTop;
      var sh = document.documentElement.scrollHeight;
      var ch = document.documentElement.clientHeight;

      if (st <= 100) {
        up.classList.add('hidden');
      } else {
        up.classList.remove('hidden');
      }

      if (st + ch >= sh - 100) {
        down.classList.add('hidden');
      } else {
        down.classList.remove('hidden');
      }
    }

    window.addEventListener('scroll', updateButtons);
    window.addEventListener('resize', updateButtons);
    updateButtons();

    up.onclick = function() { window.scrollTo({ top: 0, behavior: 'smooth' }); };
    down.onclick = function() { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); };
  })();

</script>

Примечание! Чтобы избежать ошибок при добавлении кода в XML-шаблон (например, в Blogger), его необходимо обернуть в специальную конструкцию  //<![CDATA[...//]]>

💡 Пример правильного оформления:

<script type='text/javascript'>
//<![CDATA[ 
   Ваш код здесь!
//]]>
</script>
</body>
<!-- Перед этим закрывающимся тегом </body> вставляем всё -->

💡 Готово! Теперь на вашем блоге появятся кнопки Вверх/Вниз. Стили CSS вы сможете менять между тегами <style>...</style>.