JQuery: Using Class Name Selectors With The Animate() Method Does Not Work
I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website. I have put together a Plunker consisting of two pages (ind
Solution 1:
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.
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.
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:
- Adding an event listener for the linkClicked event
- Checking which page was clicked
- If not the about us page scroll the page to the top if needed
Barba.Dispatcher.on('linkClicked', function(link,event) {
if(!link.href.includes('about.html') {
$('html, html body').animate({
scrollTop: 0
},1000);
}
});
Post a Comment for "JQuery: Using Class Name Selectors With The Animate() Method Does Not Work"