How to leave a fullscreen div with CSS3 and scrollTo with jQuery

Question

I’m trying to create a responsive website with Twitter Bootstrap and would like to know how I could leave the div so that they stay fullscreen, that is, that it occupies the entire screen and that when you press the button, the site slides smoothly until the next div.

I tried to use the fullPage.js but he ended up disfiguring the whole site, leaving the Portfolio over the Contact. Also, the text was not centralized (horizontal and vertical).

Answer 1

Once you are making use of Bootstrap, I assume you have jQuery in use as well. So there is a solution to give you a starting point:

Example in Jsfiddle

/* Retirar da tag "body" a altura que a barra de navegação consome
 * para que as "div" fiquem todas com o máximo de altura da tela.
 */
var navH = $('body > .nav').outerHeight(true);
$('body').css({
  "margin-top": navH + "px"
});

/* Anexar um evento de clique nos links de navegação
 */
$('body > .nav').on("click", 'a', function(e){
  e.preventDefault(); // cancela o scrollTo do navegador

  var target        = $(this).attr("href"),    // apanhar ID da "div" alvo
      elementOffset = $(target).offset().top,  // distancia do elemento alvo até ao topo
      distance      = (elementOffset - navH);  // distancia que é necessário percorrer

  /* Animar o ScrollTo do navegador
   */
  $("html, body").animate({scrollTop:distance}, '500', 'swing', function() { 
    /* Atualizar elemento ativo após animação concluída
     */
    $('body > .nav .active').removeClass("active");
    $('a[href="'+target+'"]').parent().addClass('active');
  });
});

$(function() {

  var navH = $('body > .nav').outerHeight(true);

  $('body').css({
    "margin-top": navH + "px"
  });

  $('body > .nav').on("click", 'a', function(e) {
    e.preventDefault();

    var target = $(this).attr("href"),
      elementOffset = $(target).offset().top,
      distance = (elementOffset - navH);

    $("html, body").stop(true, true).animate({
      scrollTop: distance
    }, '500', 'swing', function() {
      $('body > .nav .active').removeClass("active");
      $('a[href="' + target + '"]').parent().addClass('active');
    });
  });
});

html,
body {
  height: 100%;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  color: #FFF;
}
#sections,
#sections > div {
  width: 100%;
  height: 100%;
}
#section_1 {
  background: green;
}
#section_2 {
  background: yellow;
}
#section_3 {
  background: white;
}
#section_4 {
  background: blue;
}
#section_5 {
  background: pink;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#section_1">Div 1</a>
  </li>
  <li role="presentation"><a href="#section_2">Div 2</a>
  </li>
  <li role="presentation"><a href="#section_3">Div 3</a>
  </li>
  <li role="presentation"><a href="#section_4">Div 4</a>
  </li>
  <li role="presentation"><a href="#section_5">Div 5</a>
  </li>
</ul>
<div id="sections">
  <div id="section_1">Olá 1</div>
  <div id="section_2">Olá 2</div>
  <div id="section_3">Olá 3</div>
  <div id="section_4">Olá 4</div>
  <div id="section_5">Olá 5</div>
</div>

The solution above works upon a certain Markup and using some CSS properties. However, it is extremely flexible and quickly adaptable to other realities (Markup different).

Check the examples to see the solution in operation and be able to observe the CSS in use whose relevant part is intended with the heights of the elements to 100% later adjusted in the tag <body/> via Javascript.

Note: This suggestion will gracefully fall when Javascript is disabled because target elements are present in href navigation, which corresponds to the "native" behavior for this type of scenarios.