gpt4 book ai didi

javascript - jQuery:将类名选择器与 animate() 方法一起使用不起作用

转载 作者:行者123 更新时间:2023-12-03 01:30:48 25 4
gpt4 key购买 nike

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

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

我希望“关于我们”页面不仅可以淡入,而且还可以向下滚动 250 像素。

为此目的,我有:

  1. 关于我们页面的 html 标签中添加了一个类:<html class="about">
  2. 在 script.js 中添加了以下内容:

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

Evan 虽然如果脚本中没有提到类名选择器页面会滚动,但上面的版本不起作用。但我希望“关于我们”页面具有动画效果。

我应该改变什么?

最佳答案

“关于我们”页面和索引页面显示在同一页面上,不会为每个页面渲染一个新的 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);
}
});

关于javascript - jQuery:将类名选择器与 animate() 方法一起使用不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51314562/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com