代码之家  ›  专栏  ›  技术社区  ›  Razvan Zamfir

jquery:对animate()方法使用类名选择器不起作用

  •  0
  • Razvan Zamfir  · 技术社区  · 7 年前

    我刚刚发现 Barba.js 发现它很有用。它在同一网站的url之间提供平滑的转换。

    我已经做了一个 Plunker 由两个页面(index.html和about.html)组成,通过jquery的 fadeIn() fadeOut() 方法。

    我想要 关于我们 页面不仅要淡入,而且还要向下滚动大约250像素。

    为此,我有:

    1. 关于我们 页码: <html class="about">
    2. 在script.js中添加了以下内容:

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

    尽管页面滚动如果脚本中没有提到类名选择器,但是上面的版本不起作用。但我想 只有 “关于我们”的网页要动画。

    我该换什么?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Patrick Evans    7 年前

    “关于我们”页面和索引页面显示在同一页面上,不会为每个页面呈现新的HTML文档。每一页的内容都是在前一页的基础上写的. .barba-wrapper div元素。所以滚动其中一个页面将“滚动另一个”,因为它们在同一个页面上。

    这个 <html> 元素在页开关之间保持不变,它永远不会得到类 about 是的。这就是为什么选择器无法滚动页面的原因。

    如果你想让页面在返回时回到顶部,只需在barba上将其动画化回顶部即可。您可以通过以下方式执行此操作:

    1. 为添加事件侦听器 linkClicked event
    2. 正在检查单击了哪个页面
    3. 如果不是“关于我们”页面,请根据需要将页面滚动到顶部

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