Кнопка навигации  «Прокрутить наверх». Код для getcourse

Что делает код:

Показывает кнопку при определенном значении прокрутки страницы. При нажатии на эту кнопку происходит плавный скролл до начала страницы.

Можно применять на длинных страницах или уроках с множеством блоков контента в визуальном конструкторе геткурса

CSS

/* Скрыть виджет обратной связи */
.talks-widget-button {
  display: none;
}

#button_to_top {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;

  /* Иконка стрелки вверх */
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/629406/sc/385/h/b5328a61e88bd4e767caaa1e5baf96ca.svg");

  /* Цвет фона кнопки */
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}


#button_to_top:hover {
  cursor: pointer;
  transition: all 0.4s;
}

#button_to_top.btn_show {
  opacity: 0.85;
  visibility: visible;
}

#button_to_top.btn_show:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  #button_to_top {
    margin: 5px;
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 0;
    background-size: 15px;
  }

  .with-left-menu #button_to_top {
    bottom: 50px;
  }

}

HTML в Блок: HTML

<div id="button_to_top">
</div>

JS в Блок: JavaScript

$(function() {
    /* Сколько нужно проскроллить чтобы появилась кнопка */
    const scroll_value = 600;
    
    /* За сколько миллисекунд должна быть прокрутка до верха страницы */
    const ms = 300;
    
    /* Получаем кнопку */
    const btn = $('#button_to_top');
    

      if ($(window).scrollTop() > scroll_value) {
        btn.addClass('btn_show');
      } else {
        btn.removeClass('btn_show');
      }
    
    
    $(window).scroll(function() {
      if ($(window).scrollTop() > scroll_value) {
        btn.addClass('btn_show');
      } else {
        btn.removeClass('btn_show');
      }
    });
    
    btn.on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({scrollTop:0}, ms);
    });
})