Question

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

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

Answer 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的任何值。不过您应该明白这个想法！

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

1 个答案: