Z punktu widzenia UX-owego, niedopuszczalnym błędem jest wyrzucanie użytkownika z jego flow i po kliknięciu przycisku "Poprzednie wpisy" załadować mu stronę od nowa i wyświetlić jej górę z sekcją Hero. A tak niestety działa natywnie wbudowana paginacja w Webflow.
Rozwiązanie problemu
Sposobem na to, jaki stosowałem kilkukrotnie, było po prostu pozbycie się paginacji. Było to rozwiązanie o tyle skuteczne, co tchórzliwe i dalece nieoptymalne. Chcemy przecież dać użytkownikowi możliwość przejrzenia większej listy wpisów, niż tylko 3 ostatnie.
Wiedziałem, że właściwym rozwiązaniem będzie stworzenie takiej funkcjonalności, która zapamięta pozycję scrolla w momencie kliknięcia w przycisk paginacji, a następnie, po przeładowaniu strony, niezauważalnie przewinie ją do poprzedniego miejsca. Wykorzystałem do tego JavaScript i sessionStorage. Po odświeżeniu strony, przywracam użytkownika dokładnie do tego samego miejsca – co do piksela. Nie ma widocznego scrollowania, migania, ani utraty kontekstu.
Oto kod, który umieściłem w sekcji <body> na stronach, gdzie występuje ta właśnie sekcja z trzema ostatnimi wpisami:
<style>
/* Ukrycie całej strony na chwilę, żeby uniknąć migania */
html.page-hidden {
visibility: hidden !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Wyłącz natywną pamięć scrolla przeglądarki
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// Znajdź wszystkie przyciski paginacji w CMS Collection List
const paginationButtons = document.querySelectorAll('.pagination-button');
// 1️⃣ Zapisz dokładną pozycję scrolla przy kliknięciu w paginację
paginationButtons.forEach(button => {
button.addEventListener('click', () => {
sessionStorage.setItem('scrollPos', window.scrollY);
});
});
// 2️⃣ Przywróć scroll po przeładowaniu strony
const savedScroll = sessionStorage.getItem('scrollPos');
if (savedScroll !== null) {
// Ukryj dokument, zanim Webflow wyrenderuje treść
document.documentElement.classList.add('page-hidden');
requestAnimationFrame(() => {
// Ustaw scroll dokładnie tam, gdzie był użytkownik
window.scrollTo(0, parseInt(savedScroll));
// Odsłoń stronę w kolejnej klatce, by uniknąć migania
requestAnimationFrame(() => {
document.documentElement.classList.remove('page-hidden');
sessionStorage.removeItem('scrollPos');
});
});
}
});
</script>Jak to działa?
window.scrollY zapisuje dokładną pozycję okna w momencie kliknięcia.
requestAnimationFrame sprawia, że przewinięcie następuje w optymalnym momencie renderowania.
Ukrycie strony (visibility: hidden) sprawia, że użytkownik nie widzi żadnego migania.
history.scrollRestoration = 'manual' zabezpiecza przed natywnym „przywracaniem” scrolla w przeglądarkach.
Efekt jest taki, że nawet jeśli paginacja w Collection List przeładowuje stronę, sekcja blogowa pojawia się dokładnie tam, gdzie była. Każdy kolejny wpis można przeglądać płynnie, bez utraty kontekstu, bez frustracji.
Na pewno są lepsze rozwiązania, do których będę dążył w przyszłości, ale na dziś mi wystarczy, że użytkownik nie skacze na górę strony. Proste, eleganckie i skuteczne.
