动画仅适用于“body”和“html”

Question

我正在做的事情有点复杂，但我认为必须有更好的方法。

Here's带有我的网络功能的CodePen。

此功能的关键在于此脚本：

$(function() {
    $('#nav a').bind('click',function(event){
        var $anchor = $(this);
        $('body, html').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1000);
        event.preventDefault();
    });
});

为了概述这是做什么的，当在div nav下单击特定锚链接时，整个body和html元素会水平滚动到页面的不同部分，目标是一个单页网站仍然具有3页的内容和平滑的动画。

如果我可以定位一个不同的元素来滚动而不是body, html，那将是理想的但我不确定为什么整个脚本似乎失败（没有控制台错误）如果我尝试选择其他任何东西。当前设置的问题是整个页面滚动而不是仅包含内容的容器，我显然在这方面做错了。

所以，它下面的第二个脚本实际上只是第一个脚本，基于this简单脚本，它将页面的其余部分放在固定的位置，但只针对一个轴。这样内容就会保持中心。在实践中，这只是模仿我正在寻找的功能＆amp;所以表现很差。