JSFiddle - React, Tailwind, and code Playground

HTML

<div data-section-name="section1" class="section">
			<div class="container">Секция 1</div>
		</div>
		<div data-section-name="section2" class="section section--style-blue">
			<div class="container">Секция 2</div>
		</div>
		<div data-section-name="section3" class="section">
			<div class="container">Секция 3</div>
		</div>
		<div data-section-name="section4" class="section section--style-blue">
			<div class="container">Секция 4</div>
		</div>
		<div data-section-name="section5" class="section">
			<div class="container">Секция 5</div>
		</div>
		<div data-section-name="section6" class="section section--style-blue">
			<div class="container">Секция 6</div>
		</div>
		<div data-section-name="section7" class="section">
			<div class="container">Секция 7</div>
		</div>
		<footer class="footer">
			<div class="container">Футер</div>
		</footer>

CSS

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
.footer {
  width: 100%;
  height: 500px;
  background: #1a488c;
  color: #fff;
  padding: 20px 0;
}
.section {
  position: relative;
}
.section--style-blue {
  color: #fff;
  background: #61b3ff;
}

JavaScript

!function(e,t,o,n){"use strict";function s(o,n){d[o]&&(H.before(o,f),y=1,H.sectionName&&(t.location.hash=d[o]),n?(e(H.target).stop().scrollTop(l[o]),H.after(o,f)):(e(H.target).stop().animate({scrollTop:l[o]},H.scrollSpeed,H.easing),e(H.target).promise().done(function(){w=!1,H.after(o,f)})))}function i(e,t){for(var o=d.length;o>=0;o--)"string"==typeof e?d[o]===e&&(m=o,s(o,t)):o===e&&(m=o,s(o,t))}var c,u,a,h,r,l=[],d=[],f=[],p=[],m=0,y=1,v=(t.location.hash,!1),g=e(t).scrollTop(),b=!1,w=!1,M=!1,H={section:"section",sectionName:"section-name",easing:"easeOutExpo",scrollSpeed:1100,offset:0,scrollbars:!0,axis:"y",target:"html,body",before:function(){},after:function(){},afterResize:function(){}};e.scrollify=function(n){function i(t){e(H.target).stop().animate({scrollTop:t},H.scrollSpeed,H.easing)}function T(){e(H.section).each(function(o){e(this).css("height","auto").outerHeight()<e(t).height()?(e(this).css({height:e(t).height()}),p[o]=!1):p[o]=!0})}function E(o){e(H.section).each(function(o){l[o]=o>0?e(this).offset().top+H.offset:e(this).offset().top,d[o]=H.sectionName&&e(this).data(H.sectionName)?"#"+e(this).data(H.sectionName).replace(/ /g,"-"):"#"+(o+1),f[o]=e(this),t.location.hash===d[o]&&(m=o,v=!0)}),!0===o&&s(m,!1)}function S(){return g=e(t).scrollTop(),g>parseInt(l[m])?!1:!0}function D(){return g=e(t).scrollTop(),g<parseInt(l[m])+(f[m].height()-e(t).height())?!1:!0}e.easing.easeOutExpo=function(e,t,o,n,s){return t==s?o+n:n*(-Math.pow(2,-10*t/s)+1)+o},a={handleMousedown:function(){b=!1,M=!1},handleMouseup:function(){b=!0,M&&a.calculateNearest()},handleScroll:function(){c&&clearTimeout(c),c=setTimeout(function(){return M=!0,b===!1?!1:(b=!1,void a.calculateNearest())},200)},calculateNearest:function(){g=e(t).scrollTop();for(var o,n=1,i=l.length,c=0,u=Math.abs(l[0]-g);i>n;n++)o=Math.abs(l[n]-g),u>o&&(u=o,c=n);(D()||S())&&(m=c,s(c,!1))},wheelHandler:function(e,t){return...