Добавление кнопки прокрутки вниз в Shopify пользовательскую тему - PullRequest
Новая
       12

Добавление кнопки прокрутки вниз в Shopify пользовательскую тему

0 голосов
/ 06 октября 2019

Я настраиваю магазинную тему движения. Я добавил свиток вниз в нижней части слайдера. Но возникла проблема с прокруткой вниз до следующего раздела

. Я добавил кнопку прокрутки вниз с этим кодом; 

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

Но в настоящее время это только значок. Мне нужно сделать это прокрутить вниз

1 Ответ

0 голосов
/ 08 октября 2019

Я бы сделал это с помощью 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 любые значения. Вы должны понять, хотя!

...