jQuery：将 class 名称选择器与 animate() 方法一起使用不起作用

Question

我刚刚发现 Barba.js 并且发现它非常有用。它提供同一网站的 URL 之间的平滑过渡。

我整理了一个Plunker，由两个页面（index.html和about.html）组成，在帮助下加载顺利jQuery 的 fadeIn() 和 fadeOut() 方法。

我希望 关于我们 页面不仅淡入，而且向下滚动约 250 像素。

为此，我有：

在 关于我们 页面的 html 标签中添加了 class：<html class="about">
在 script.js 中添加了这个：

$('html.about, html.about body').animate({ scrollTop: 300 },1000);

Evan 如果脚本中没有提到 class 名称选择器，页面会滚动，但上面的版本不起作用。但是我希望只 "About Us" 页面设置动画。

我要改什么？

Answer 1

"About Us"页面和索引页面显示在同一页面上，不为每个页面呈现一个新的html文档。每页的内容只是简单地覆盖前一页，即在 .barba-wrapper div 元素内。所以滚动一页会 "scroll the other one" 因为他们在同一页上。

<html> 元素在页面切换之间保持不变，它永远不会得到 class about。这就是您的选择器无法滚动页面的原因。

如果您希望页面在返回时回到顶部，只需在 Barba 更改它时将其设置为动画回到顶部即可。您可以通过以下方式做到这一点：

为 linkClicked event
检查点击了哪个页面
如果不是“关于我们”页面，请根据需要将页面滚动到顶部

Barba.Dispatcher.on('linkClicked', function(link,event) {
   if(!link.href.includes('about.html') {
     $('html, html body').animate({
       scrollTop: 0
     },1000);
   }
});

jQuery：将 class 名称选择器与 animate() 方法一起使用不起作用

jQuery: using class name selectors with the animate() method does not work

html

javascript

jquery

jquery-animate