Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Full width blocks - one page website
<nav class="nav">
<ul>
<li><a href="#bloco1" class="link">Bloco 1</a></li>
<li><a href="#bloco2" class="link">Bloco 2</a></li>
<li><a href="#bloco3" class="link">Bloco 3</a></li>
<li><a href="#bloco4" class="link">Bloco 4</a></li>
<li><a href="#bloco5" class="link">Bloco 5</a></li>
</ul>
</nav>
<div class="blocks" id="bloco1"></div>
<div class="blocks" id="bloco2"></div>
<div class="blocks" id="bloco3"></div>
<div class="blocks" id="bloco4"></div>
<div class="blocks" id="bloco5"></div>
$(document).ready(function() {
$('.link').on('click', function(e){
var hash = $(this).attr('href');
$('html,body').animate({
scrollTop: $(hash).offset().top
}, 800);
return false;
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
html, body {
width: 100%;
height: 100%;
/* overflow: hidden; */
padding: 0;
margin: 0;
}
.nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: #fff;
}
.nav li {
list-style: none;
display: inline-block;
}
.nav .link {
text-transform: uppercase;
text-decoration: none;
font-size: 11px;
font-family: Sans-serif;
color: #333;
margin: 0 10px;
}
.blocks {
width: 100%;
min-height: 100%;
overflow: hidden;
}
.blocks:nth-child(1) {
background: green;
}
.blocks:nth-child(2) {
background: blue;
}
.blocks:nth-child(3) {
background: pink;
}
.blocks:nth-child(4) {
background: yellow;
}
.blocks:nth-child(5) {
background: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.