页面导航和滚动效果

Question

我正在为一个客户建立一个只有一页的网站，基本上它是多个<section>都在display:none;除了一个当前浏览，并使用标题菜单切换视图。

 $('header a').click(function(){
                var target = $(this).attr('href');
                $("#content > .visible").css('display', 'none').removeClass('visible');
                $(target).css('display', 'block').addClass('visible');
 });

所以它就像一个护身符，但我的客户要求我在改变视图时添加滚动效果……在目前的配置下，我不知道如何使用我的display:none;系统来处理它，如果我不得不重写我的导航系统，那将真的很麻烦……

有谁知道吗？

Answer 1

您可能希望对单页滚动网站使用fullPage.js。

• Github repo
• Demo

Answer 2

使用jQuery有一个简单的解决方案。有一些名为"hide“和"show”的内置函数，您可以将参数传递给它们。您应该能够将您的代码更改为：

$('header a').click(function(){
            var target = $(this).attr('href');
            $("#content > .visible").hide(1000).removeClass('visible');
            $(target).show(1000).addClass('visible');
});

1000是毫秒。如果您想要更复杂的东西，.animate函数比.hide和.show有更多的选项。