添加向下滚动按钮以Shopify自定义主题

我正在定制shopify运动主题。我在滑块底部添加了一个向下滚动的svg。但在向下滚动到下一节时遇到问题

我已经添加了向下滚动按钮的代码

div.hero__image-wrapper:after {
    content:  url({{ "icon-scroll-down.svg" | asset_url }}) ;
    position: absolute;
    display: block;
    z-index: 34560;
    bottom: 20px;
    left: 48%;
    font-size: 2em;
    border-radius: 1em;
    font-weight: bold;

    border: 3px solid gray;
    padding: 0.1em 0.1em 0;

    animation-name: color_change;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes color_change {
    0%  { color: gray;  bottom:20px;}
    10% { color: black; bottom:10px;}
    20% { color: gray;  bottom:20px;}
    100%{ color: gray;  bottom:20px;}
}

---

但目前它只是一个图标。我需要让它向下滚动

我会用JS来代替。让我们假设您的按钮是一个实际元素，而不是伪

：：after

：

<div class="scroll-down-button"></div>

那么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

任何值。不过，你应该明白这一点

(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);
})();