1

我有一个简短的 jQuery 脚本的小问题。我想创建一个简单的滚动系统，在我页面的 100% 高度部分之间。

我试过了，但是在使用 animate() jQuery 函数时出现了一个奇怪的问题。

我已经在服务器上上传了文件：http ://www.fitnessmith.fr/test/

尝试浏览带有右侧链接的部分，您会明白我的意思。

这是用于创建动画的代码

$("nav#menu li a").on("click", function(e){
    e.preventDefault();
    var href = $(this).attr("href");
    $('html, body').animate({scrollTop:$(href).offset().top}, 600, 'easeInExpo');
});

有没有人有解决它的想法？感谢您的帮助

4

1 回答 1

1

问题是您同时应用于overflow: hidden和html元素body。如果您overflow从html,body规则中删除 ，则只有文档正文元素将overflow:hidden根据您的特定body规则。

发生这种情况的原因是，当您scrollTop为两者的属性设置动画时html，body由于两者都没有溢出，因此无法真正滚动，改变的是相对于它们的偏移父级的内容。body

$('#about').offset()如果您在单击链接一次后调用，您可以看到这一点。它报告的最高位置为 0！发生的情况是，您的页面“顶部”只是向上移动，以便将内容滚动到视口，同时保持不溢出。$('#home').offset()在该点报告一个大的负顶部以表明这一点。

通过删除html,body { overflow: hidden; }规则，您允许内容在容器上滚动，而更具体的body { overflow: hidden; }规则隐藏滚动条。

于 2013-07-27T16:49:08.197 回答