Question

我有一个bootstrap模板，其中包含一个带有3个链接的导航栏。每个链接指向一个锚点。每个锚点都是SECTION，高度设置为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');

CSS翻译使用锚点移动到下一个DIV

1 个答案: