CSS translatey to move to the next DIV using anchors - html

Question

I have a bootstrap template which include a navigation bar with 3 links. Each link point to an anchor.
Each anchor is a SECTION with height set to 100%. The scrollbar is hidden so the only way to navigate to the next section is by using the navigation bar.
I want to add an animation while the anchor is change.
I setup my template and the animation but I don't understand why my DIVS goes offset instead of scrolling as expected.
My JSFiddle is https://jsfiddle.net/raffaeu/qu4skwf4/
I set the transitions as following:
#home:target{
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
#about:target{
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#contact:target{
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
And this is how I set the animation for each section
section {
width: 100%;
height: 100%;
z-index:0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

Answer 1

I belive that in this case CSS translate is unnecessary and even plain wrong approach. Scrollbar is invented for a reason, and you should not take it away from page visitors. Also, think about mobile users.
I suggest better using jQuery.offset function and add animation, like this:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('id3');