jQuery:将类名选择器与animate()方法一起使用不起作用 [英] jQuery: using class name selectors with the animate() method does not work
问题描述
我刚刚发现 Barba.js ，发现它非常有用.它提供了同一网站的URL之间的平滑过渡.
I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website.
我整理了一个由两页组成的 柱塞 (index.html和about.html)可以借助jQuery的fadeIn()和fadeOut()方法顺利加载.
I have put together a Plunker consisting of two pages (index.html and about.html) that are loaded smoothly, with the help of jQuery's fadeIn() and fadeOut() methods.
我希望关于我们页不仅可以淡入，而且还可以向下滚动约250像素.
I would like the About us page to not only be faded in, but scrolled down some 250px too.
为此，我有:
- 在关于我们页面的html标签中添加了一个类:
<html class="about"> -
在script.js中添加了此内容:
- added a class to the html tag in the About Us page:
<html class="about"> added this in the script.js:
$('html.about, html.about body').animate({
scrollTop: 300
},1000);
$('html.about, html.about body').animate({
scrollTop: 300
},1000);
即使在脚本中未提及类名选择器的情况下，页面也会滚动，但以上版本不起作用.但我只想让 关于我们"页面动画.
Evan though the page scrolls if no class name selector is mentioned in the script, the version above does not work. But I want only the "About Us" page to be animated.
我应该改变什么?
推荐答案
关于我们"页面和索引页面显示在同一页面上，不会为每个页面呈现新的html文档.每个页面的内容都简单地覆盖了前一页，即在.barba-wrapper div元素内.因此，滚动一个页面将滚动另一个"页面，就像它们在同一页面上一样.
The "About Us" page and the index page are displayed on the same page, a new html document is not rendered for each page. The content of each page is simply written over the previous one, ie inside the .barba-wrapper div element. So scrolling the page of one is going to "scroll the other one" as they are on the same page.
<html>元素在页面切换之间保持不变，它永远不会获得类about.这就是为什么您的选择器无法滚动页面的原因.
The <html> element stays the same between page switches, it never gets a class about. This is why your selector doesn't work to scroll the page.
如果您想让页面在返回时返回顶部，只需在Barba上对其进行动画处理即可返回顶部，以进行更改.您可以通过以下方式做到这一点:
If you want the page to be back at the top when going back simply animate it back to the top on Barba changing it. You can do this by:
- 为 linkClicked事件添加事件监听器
- 检查点击了哪个页面
- 如果不是关于我们"页面，则在需要时将页面滚动到顶部
Barba.Dispatcher.on('linkClicked', function(link,event) {
if(!link.href.includes('about.html') {
$('html, html body').animate({
scrollTop: 0
},1000);
}
});
这篇关于jQuery:将类名选择器与animate()方法一起使用不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
