<nav class="mainMenu">
  <h3>Menu</h3>
  <ul>
    <li><a href="#tata" class="active" data-target="tata">item 1</a></li>
    <li><a href="#tete" data-target="tete">item 2</a></li>
    <li><a href="#titi" data-target="titi">item 3</a></li>
    <li><a href="#toto" data-target="toto">item 4</a></li>
    <li><a href="#tutu" data-target="tutu">item 5</a></li>
    <li><a href="#tyty" data-target="tyty">item 6</a></li>
  </ul>
</nav>
<section class="sectionOnePage" id="tata" id="top">
  <div class="content">section 1</div>
</section>
<section class="sectionOnePage" id="tete">
  <div class="content">section 2</div>
</section>
<section class="sectionOnePage" id="titi">
  <div class="content">section 3</div>
</section>
<section class="sectionOnePage" id="toto">
  <div class="content">section 4</div>
</section>
<section class="sectionOnePage" id="tutu">
  <div class="content">section 5</div>
</section>
<section class="sectionOnePage" id="tyty">
  <div class="content">section 6</div>
</section>
<div class="backToTop">
  <a href="#"><i class="fa fa-arrow-up"></i></a>
</div>

/* IMPORT GOOGLE FONTS */
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,900,700);

* {
  box-sizing: border-box;
}

body {
  width:100%;
  height:100%;
  margin:0 auto;
}

.mainMenu {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 10%;
  width: 120px;
  padding: 10px;
  color: #fff;
  background-color: #2c3e50;
  border-radius: 0 10px 10px 0;
  
  h3 {
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 3px;
    font: 700 18px PT Sans;
    padding:5px;
    margin: 0 0 10px;
    border-bottom: 2px dotted rgba(255,255,255,0.1);
  }
  
  ul {
    list-style-type: none;
    margin-left:5px;
    li {
      padding: 3px 0;
      a {
       color: rgba(255,255,255,0.5);
       text-decoration:none;
       text-transform: uppercase; 
       font: 400 14px PT Sans;
       margin-left: 0px;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      -ms-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms;
        &:before {
          font-family: 'FontAwesome';
          font-size: 14px;
          content: '\f10d';
          padding-right: 10px;
        }
        &:hover {
          color: rgba(255,255,255,0.9);
          margin-left: 10px;
          &:before {
            content: '\f064';
          }
        }
        &.active {
          font-weight: 900;
          color: rgba(255,255,255,1);
          margin-left: 10px;
          &:before {
            content: '\f00c';
          }
        }
      }
    }
  }
}

.sectionOnePage {
  width: 100%;
  height: 100vh;
  &#tata {
    background-color: #1abc9c;
  }

  &#tete {
    background-color: #27ae60;
  }

  &#titi {
    background-color: #e67e22;
  }

  &#toto {
    background-color: #d35400;
  }

  &#tutu {
    background-color: #e74c3c;
  }

  &#tyty {
    background-color: #c0392b;
  }
  .content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    margin: 0 auto;
    text-align:center;
    font: 900 72px 'Lato';
    color: #fff;
    text-transform:uppercase;
  }
}

.backToTop {
  z-index: 999;
  margin: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display:block;

  a {
    color: #fff;
    
    i {
      font-size: 32px;
    }
  }
}

$( document ).ready( function() {
  // scrollTo('.mainMenu-links')    ;
  scrollTo();
  scrollToTop();
});

function scrollTo () {
  $('.mainMenu a').click(function(e) {
      e.preventDefault();
      $('.mainMenu a').removeClass('active');
      $(this).addClass('active');
    
     var distanceTopToSection = $( '#' +  $(this).data('target')).offset().top;
    
         $( 'body, html' ).animate({scrollTop:distanceTopToSection }, 'slow');
  });
}

/*function scrollTo (classLink) {
   $('a', classLink).on('click', function(e) {
     e.preventDefault();
     var distanceTopToSection = $( '#' +  $(this).data('target')).offset().top;
     $( 'body, html' ).animate({scrollTop:distanceTopToSection }, 'slow');
  });
}*/

function scrollToTop () {
  var backToTop = $('.backToTop');
  var showBackTotop = $(window).height();
  backToTop.hide();
  
  var children = $(".mainMenu li").children(); 
  var tab = []; 
  for (var i=0; i < children.length; i++) {
    console.log(children[i]);
    var child = children[i];
    var ahref = $(child).attr('href'); 
    console.log(ahref);
    tab.push(ahref);
  }
  

  $(window).scroll( function() {
    var windowScrollTop = $(window).scrollTop();
    if( windowScrollTop > showBackTotop  ) {
      backToTop.fadeIn('slow');
    } else {
      backToTop.fadeOut('slow');
    }
    
    var windowHeight = $(window).height(); 
    var docHeight = $(document).height();

    for (var i=0; i < tab.length; i++) {
        var link = tab[i];
        var divPos = $(link).offset().top; 
        var divHeight = $(link).height(); 
        if (windowScrollTop >= divPos && windowScrollTop < (divPos + divHeight)) {
            $(".mainMenu a[href='" + link + "']").addClass("active");
        } else {
            $(".mainMenu a[href='" + link + "']").removeClass("active");
        }
    }

    if(windowScrollTop + windowHeight == docHeight) {
        if (!$(".mainMenu li:last-child a").hasClass("active")) {
            var navActive = $(".active").attr("href");
            $(".mainMenu a[href='" + navActive + "']").removeClass("active");
            $(".mainMenu li:last-child a").addClass("active");
        }
    }
  });

  backToTop.click( function(e) {
    e.preventDefault();
    $(' .mainMenu li a ').removeClass( 'active' );
    $(' .mainMenu li a:first ').addClass( 'active' );
    $(' body, html ').animate( {scrollTop : 0}, 'slow' );
  });
}