fix(view): jump to correct hash element with animation.js

This commit is contained in:
ppoffice 2022-09-11 22:45:41 -04:00
parent f28825d5e4
commit 199a9d1c05
No known key found for this signature in database
GPG Key ID: D872802C1F2A16AA
1 changed files with 19 additions and 5 deletions

View File

@ -1,4 +1,4 @@
(function() { (function () {
function $() { function $() {
return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments)); return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
} }
@ -11,7 +11,7 @@
[ [
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation', '.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
'.column-left > .card, .column-right-shadow > .card', '.column-left > .card, .column-right-shadow > .card',
'.column-right > .card' '.column-right > .card',
].forEach(selector => { ].forEach(selector => {
$(selector).forEach(element => { $(selector).forEach(element => {
element.style.transition = '0s'; element.style.transition = '0s';
@ -20,18 +20,25 @@
element.style.transformOrigin = 'center top'; element.style.transformOrigin = 'center top';
}); });
}); });
// disable jump to location.hash
if (window.location.hash) {
window.scrollTo(0, 0);
setTimeout(() => window.scrollTo(0, 0));
}
setTimeout(() => { setTimeout(() => {
$('body > .navbar, body > .section, body > .footer').forEach(element => { $('body > .navbar, body > .section, body > .footer').forEach(element => {
element.style.opacity = '1'; element.style.opacity = '1';
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out'; element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
}); });
document.querySelector('body > .navbar').style.transform = 'translateY(0)'; document.querySelector('body > .navbar').style.transform = 'translateY(0)';
let i = 1;
[ [
'.column-main > .card, .column-main > .pagination, .column-main > .post-navigation', '.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
'.column-left > .card, .column-right-shadow > .card', '.column-left > .card, .column-right-shadow > .card',
'.column-right > .card' '.column-right > .card',
].forEach(selector => { ].forEach(selector => {
let i = 1;
$(selector).forEach(element => { $(selector).forEach(element => {
setTimeout(() => { setTimeout(() => {
element.style.opacity = '1'; element.style.opacity = '1';
@ -41,5 +48,12 @@
i++; i++;
}); });
}); });
// jump to location.hash
if (window.location.hash) {
setTimeout(() => {
document.querySelector(window.location.hash).scrollIntoView({ behavior: 'smooth' });
}, i * 100);
}
}); });
}()); })();