JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#home">Test Portfolio</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav nawigacja">
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>

    </div>
    <!--koniec container-fluid-->
  </nav>


  <div class="sekcja container-fluid" id="home">
    <p>home</p>
  </div>

  <div class="sekcja container-fluid" id="about">
    <p>about</p>
  </div>

  <div class="sekcja container-fluid" id="portfolio">
    <p>portfolio</p>
  </div>

  <div class="sekcja container-fluid" id="contact">
    <p>contact</p>
  </div>
  </body>

CSS

body {
  position: relative;
  font-family: Roboto;
}

.sekcja {
  padding-top: 50px;

}

.nawigacja {
  padding-left: 20px;
}

.navbar {
  font-size: 18px;
}

#home {
  background-image: url(http://i.imgur.com/fUCCtLu.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}

#about {
  background-image: url(http://i.imgur.com/1ab2cCH.jpg);
  background-position: left;
  background-size: cover;
  height: 100vh;

}

#portfolio {
  background-image: url(http://i.imgur.com/lGSIRoK.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;

}

#contact {
  background-image: url(http://i.imgur.com/9uPlo1K.jpg);
  background-position: center top;
  background-size: cover;
  height: 100vh;

}

p {
  color: white;
  font-size: 30px;
  text-align: center;
}

JavaScript

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
      &&
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });