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

【问题标题】：Adding scroll down button to Shopify custom theme向 Shopify 自定义主题添加向下滚动按钮
【发布时间】：2019-10-05 21:51:30
【问题描述】：

我正在自定义 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;}
}

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

【问题讨论】：

标签： shopify shopify-template

【解决方案1】：

我会用 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 任何值。不过你应该明白了！

【讨论】：