CSS translatey для перехода к следующей DIV с помощью якорей

Question

У меня есть шаблон начальной загрузки, который включает панель навигации с 3-мя ссылками. Каждая ссылка указывает на привязку. Каждый якорь представляет собой РАЗДЕЛ с высотой, установленной на 100%. Полоса прокрутки скрыта, поэтому единственный способ перейти к следующему разделу - использовать панель навигации.

Я хочу добавить анимацию, пока якорь изменится. Я настраиваю свой шаблон и анимацию, но я не понимаю, почему мой DIVS смещается, а не прокручивается, как ожидалось.

Мои JSFiddle является https://jsfiddle.net/raffaeu/qu4skwf4/

Я установил переходы следующим образом:

#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%); 
} 

И это, как я установить анимацию для каждой секции

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

Я верю, что в этом случае Перевод CSS не нужен и даже простой неправильный подход. Полоса прокрутки выдумана по какой-то причине, и вы не должны отвлекать ее от посетителей страницы. Также подумайте о мобильных пользователях.

Я предлагаю лучше, используя jQuery.offset функцию и добавить анимацию, например:

function scrollToAnchor(aid){ 
    var aTag = $("a[name='"+ aid +"']"); 
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); 
} 

scrollToAnchor('id3');