嵌套滑动器中的垂直滚动按钮

Question

我想在嵌套的滑块中创建垂直滚动（向下滚动/向下滚动）按钮。我的滑块看起来像这样：

var swiperH = new Swiper('.swiper-container-h', {
    effect: 'fade',
    fadeEffect: {
            crossFade: true
    },
    direction: 'horizontal',
    loop: true,
        speed: 800,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    keyboard: {
            enabled: true,
            onlyInViewport: true,
    },
});

var swiperV = new Swiper('.swiper-container-v', {
    speed: 800,
        direction: 'vertical',
    keyboard: {
            enabled: true,
            onlyInViewport: true,
    },
    mousewheel: {
            invert: false,
    },
});

<!-- Swiper -->
<div class="swiper-container swiper-container-v">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-h">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><h1>Slide 1</h1></div>
                    <div class="swiper-slide"><h1>Slide 2</h1></div>
                    <div class="swiper-slide"><h1>Slide 3</h1></div>
                    <div class="swiper-slide"><h1>Slide 4</h1></div>
                    <div class="swiper-slide"><h1>Slide 5</h1></div>
                </div>

                <!-- Scroll Down Button -->

                <a href="#" class="scroll-down-button">Scroll Down Button</a>

            </div>
        </div>
        <div class="swiper-slide bg-gradient-06">Slide 6</div>
        <div class="swiper-slide bg-gradient-07">Slide 7</div>
        <div class="swiper-slide bg-gradient-08">Slide 8</div>
        <div class="swiper-slide bg-gradient-09">Slide 9</div>
        <div class="swiper-slide bg-gradient-10">Slide 10</div>
    </div>
</div>

.scroll-down-button  {
        border-style: none;
        bottom: 25px;
        box-sizing: border-box;
        color: #3555ff;
        display: block;
        height: auto;
        left: 50%;
        opacity: 1;
        overflow: visible;
        padding: 0;
        position: absolute;
        text-align: center;
        text-decoration: none;
        vertical-align: baseline;
        width: 60px;
        z-index: 100;
}

因此，我的“向下滚动”按钮获得了绝对定位。在水平幻灯片上可见。因此，我希望它滚动到单击时的第一个垂直幻灯片。我该怎么办？

对不起，在这里发表我的问题。论坛上有太多未回答的问题。

我的codepen：https://codepen.io/p3tr0ff/pen/bPQVqy