JSFiddle - React, Tailwind, and code Playground

by makekz

HTML

<nav id="nav">
 <li><a href="#home">Главная</a></li>
        <li><a href="#about">О нас</a></li>
</nav>

 <div class="section green_rose" id="home">
           <div class="container white">    
           <div id="home1" style="display:none;">
               <p>Здесь текст</p>
               </div>
     </div>
</div>
 <div class="section green_rose" id="about">
           <div class="container white">    
           <div id="home1" style="display:none;">
               <p>Здесь текст</p>
               </div>
     </div>
</div>

CSS

#nav{
position:fixed;
height:100px;
display:block;
width:100%;
font-family:'Comfortaa';
z-index:9999;
}
#nav ul li {

        width: auto;
        min-height: 40px;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin-top: 30px;
        margin-left:10px;
        font-size:18px;
        font-weight:bold;
        cursor:pointer;
        color:#fff;
         
    }

#nav ul li a:hover{
color:#00CC00;
text-shadow: 0 0 5px #009900, 
                 0 0 6px #009900, 
             0 0 7px #00ff00, 
             0 0 15px #00ff00, 
             0 0 20px #00ff00;
}
#nav ul li a.current{
color:#00ff00;
text-shadow: 0 0 5px #009900, 
                 0 0 6px #009900, 
             0 0 7px #00ff00, 
             0 0 15px #00ff00, 
             0 0 20px #00ff00;
}
.section{
padding-top:100px;
    margin:0px;
    height:2000px;
    width:100%;
    float:left;
  -webkit-box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0.075);
  z-index:0;


}

JavaScript

$(function() {
                $('#nav ul li a').bind('click',function(event){
                    var $anchor = $(this);
                    var wrap;
                    wrap = 'div'+$anchor.attr('href')+"1";
                    $("#nav ul li a").removeClass("current");
                    $(this).addClass("current");
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                         setTimeout(function () {
                            wrap.fadeIn(1500);
                        }, 1500);
                    event.preventDefault();
                    /*
                    если вы не хотите использовать эффект:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                });
            });