Я бы сделал это с помощью JS. Давайте предположим, что ваша кнопка является реальным элементом вместо псевдо ::after
:
<div class="scroll-down-button"></div>
.scroll-down-button {
// whatever style you prefer
}
Тогда код JS будет выглядеть так:
(function() {
// Get the button element
var button = document.querySelector('.scroll-down-button');
// Get current section
var currentSection = button.closest('.shopify-section');
// Get next section (the very next element after current section container)
var nextSection = currentSection.nextSibling();
// Get the coordinates of the next section
var nextSectionCoordinates = nextSection.getBoundingClientRect();
// Get the top Y axis coordinates of next section
var nextSectionTop = nextSectionCoordinates.top;
// Scroll to the top of next section (0 means no scroll on X axis)
window.scrollTo(0, nextSectionTop);
})();
Выше не проверено, поэтому дайте мне знать, если это не работает, или вы можете console.log
любые значения. Вы должны понять, хотя!