Html CSS translatey使用定位移动到下一个DIV

我有一个引导模板，其中包括一个带有3个链接的导航栏。每个链接指向一个锚点。 每个锚都是一个高度设置为100%的截面。滚动条是隐藏的，因此导航到下一部分的唯一方法是使用导航条

我想在更改锚点时添加动画。 我设置了我的模板和动画，但我不明白为什么我的div会偏移，而不是像预期的那样滚动

我的名字是

我将转换设置为如下所示：

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

---

我相信在这种情况下，CSS翻译是不必要的，甚至是完全错误的方法。滚动条的发明是有原因的，你不应该把它从页面访问者那里拿走。另外，想想移动用户

我建议最好使用jQuery.offset函数并添加动画，如下所示：

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

scrollToAnchor('id3');

---

此解决方案仅在滚动条可见时有效。该网站是完全响应，我们不想显示滚动条，我知道这个解决方案已经，但它不是我在这里要求的