JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<nav class="navigate">
  <a href="#answer1">Вопрос 1</a>
  <a href="#answer2">Вопрос 2</a>
  <a href="#answer3">Вопрос 3</a>
</nav>
<div class="content">
  <div id="answer1">
    <h1>Ответ 1</h1>
    <span>Идейные соображения высшего порядка, а также сложившаяся структура организации требуют от нас анализа направлений прогрессивного развития. Таким образом новая модель организационной деятельности требуют определения и уточнения направлений прогрессивного развития. Значимость этих проблем настолько очевидна, что начало повседневной работы по формированию позиции позволяет оценить значение новых предложений. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач.</span>
  </div>
  <div id="answer2">
    <h1>Ответ 2</h1>
    <span>Идейные соображения высшего порядка, а также сложившаяся структура организации требуют от нас анализа направлений прогрессивного развития. Таким образом новая модель организационной деятельности требуют определения и уточнения направлений прогрессивного развития. Значимость этих проблем настолько очевидна, что начало повседневной работы по формированию позиции позволяет оценить значение новых предложений. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач.</span>
  </div>
  <div id="answer3">
    <h1>Ответ 3</h1>
    <span>Идейные соображения высшего порядка, а также сложившаяся структура организации требуют от нас анализа направлений прогрессивного развития. Таким образом новая модель организационной деятельности требуют определения и уточнения направлений прогрессивного развития. Значимость этих проблем настолько очевидна, что начало повседневной работы по формированию позиции позволяет оценить значение новых предложений. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности...

CSS

.navigate {
  height: 100px;
  background: yellow;
  position: fixed;
  top: 0;
  width: 100%;
}
.navigate a {
  float: left:
  padding: 0 15px;
}
.content {
  margin-top: 100px;
}
.content div {
  min-height: 500px;
}

JavaScript

$('.navigate a').bind("click", function(e) {
  var anchor = $(this);
  $('html, body').stop().animate({
    scrollTop: $(anchor.attr('href')).offset().top - 109
  }, 1000);
  e.preventDefault();
});