JSFiddle - React, Tailwind, and code Playground

by Daniil Khanin

HTML

<header> 
<div class="logo">
           <a href="#" class="font1"><span style="color: #ffffff">ДЕМО</span><span style="color: #cfc91d">САЙТ</span></a>
        </div>

<div id="message">

        <a href="#" id="touch-menu">МЕНЮ</a>
        <nav>
            <ul class="nav">
                <li><a href="#about">ОБО МНЕ</a></li>
                <li><a href="#service">УСЛУГИ</a></li>
                <li><a href="#facts">ФАКТЫ</a></li>
                <li><a href="#contacts">КОНТАКТЫ</a></li>               
            </ul>
        </nav>
</div>
    </header>

<div class='findEl contact' name='#contacts'>Контакты</div>
<div class='findEl facts' name='#facts'>Факты</div>

CSS

header {
	background: #02918c;
	width: 100%;
	z-index: 9999;
	position: fixed;
	height: 60px;

}
.logo {float: left;
	font-size: 26px;
	line-height: 60px;
	margin-left: 88px;
	font-family: "Open Sans";}
.nav {float: right;}
.nav {margin-right: 22px;}
.nav li {float: left;}
.nav li a,
#touch-menu {
	display: block;
	font-weight: bold;
	color: #fff;
	line-height: 60px;
	padding: 0 22px;

}
.nav li a:hover, #touch-menu:hover
 {
	background: #28a19d;
	}

#touch-menu {display: none;}

@media (max-width: 1000px) {
	body {padding-top: 60px}
	header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
	}
	.logo {
		font-size: 18px;
		line-height: 60px;
		margin-left: 20px;
	}
	.nav {
		position: absolute;
		top: 100%;
		left: 50%;
		right: 0;
		display: none;
		width: 50%;

	}
	.nav li {float: none;}
	.nav li a {
		color: #ffffff;
		background: #02918c;
		text-align: center;
	}
	.nav li:first-child a {border-top: none;}
	.nav li a:hover {
		color: #ffffff;
		background: #28a19d;
	}
	#touch-menu {
		display: block;
		float: right;
		height: 60px;
		padding: 0 20px;
		line-height: 60px;
		/*margin-right: 20px;*/
	}
    
    .contact{
      
     position:relative;
        top:2000px;
        height:50px;
        background:orange;
    }
    
    .facts{
          position:relative;
        top:1000px;
        height:50px;
        background:red;
        
    }
    }

JavaScript

var touch = $('#touch-menu');
            var menu = $('.nav');
        
            $(touch).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });
        
            



$('.nav>li>a').click(function () { 
      
  
			    elementClick = $(this).attr("href");
    
             $('.findEl').each(function(){
                               
                               			     	if(elementClick==$(this).attr('name')){
                                   
                             find_el=this;
             }
             
                               });
   
				destination = $(find_el).offset().top;
    
    	$('body').animate( { scrollTop: destination-60   },1000,function(){
        
        $(menu).hide();
        
        
        });
                          
                        
                         
});