使用上一个/下一个按钮在粘滞元素之间滚动

Question

我正在尝试创建一些可以在某些div元素之间滚动的按钮。我知道可以使用scrollTop完成此操作，但是元素很粘，因此上一个按钮不会将元素滚动到视图之外。

这里是一个JSfiddle，可以更好地理解我的意思：https://jsfiddle.net/1uek576m/1/

这是我已经拥有的脚本：

(function() {
var scrollTo = function(element) {
    $('html,body').animate({
        scrollTop: element.offset().top
    }, 500);
}
$('#next').click(function(event) {
    event.preventDefault();
    var $current = $('main > .current');
    if ($current.index() != $('main > .background').length - 1) {
        $current.removeClass('current').next().addClass('current');
        scrollTo($current.next());
    }
});
$('#prev').click(function(event) {
    event.preventDefault();
    var $current = $('main > .current');
    if (!$current.index() == 0) {
        $current.removeClass('current').prev().addClass('current');
        scrollTo($current.prev());
    }
});
})();

有没有办法做到这一点？

编辑：为澄清起见，我使用的位置是：粘在块元素上以实现滚动效果，如以下youtube视频：https://www.youtube.com/watch?v=yk57cgZLWRo

所示

谢谢

Answer 1

您必须删除position: sticky。因为那些不是粘性元素。该元素应该只是普通的块元素，默认情况下为默认元素。然后单击，滚动到下一个或上一个项目。

要使内容垂直居中，可以使用Flexbox。无需将<h1>置于绝对位置。

(function() {
    var scrollTo = function(element) {
        $('html,body').animate({
            scrollTop: element.offset().top
        }, 500);
    }
    $('#next').click(function(event) {
        event.preventDefault();
        var $current = $('main > .current');
        if ($current.index() != $('main > .background').length - 1) {
            $current.removeClass('current').next().addClass('current');
            scrollTo($current.next());
        }
    });
    $('#prev').click(function(event) {
        event.preventDefault();
        var $current = $('main > .current');
		if (!$current.index() == 0) {
            $current.removeClass('current').prev().addClass('current');
            scrollTo($current.prev());
        }
    });
})();

#scroll-menu {
    position: fixed;
    right: 50px;
    top: 50px;
    z-index: 1;
}

.background {
    background: green;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background:nth-child(2) {
    background: red;
}

.background:nth-child(3) {
    background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll-menu">
    <div class="container clear">
		    <a id="prev" href="#">prev</a>
        <a id="next" href="#">next</a>
	  </div>
</div>
    
<main role="main">
    <article class="background current">
        <h1>Title</h1>
    </article>
    <article class="background">
        <h1>Title</h1>
    </article>
    <article class="background">
        <h1>Title</h1>
    </article>
</main>