如何通过单击按钮自动向下滚动模式？

Question

我在一个页面上有一个按钮，点击它时会向下滚动，如果点击它时我在页面底部，它会向上滚动。

<style>
    .scroll_button {
        position: fixed;
        right: 35px;
        z-index: 100;
    }
</style>

<div class="scroll_button" style="bottom: 10px;">
    <button id="scroll_id" class="btn btn-primary">
        <span> Click to Scroll</span><br><i id="scroll_icon" class="fa fa-chevron-circle-down"></i>
    </button>
</div>

<script>
//scroll up and down

    $(function () {
        $('#scroll_id').click(function (e) {
            e.preventDefault();
            var $win = $(window);
            var scrollTarget = $win.height() + $win.scrollTop() + 1 >= $(document).height() ? 0 : $win.scrollTop() + $win.height()
            $("html, body, .modal").animate({
                scrollTop: scrollTarget
            }, 600);

        });
    });
</script>

我在此页面中有一个模态框，我希望在单击该按钮时使用相同的按钮来滚动模态框的内容。

所以，我复制了按钮的 html 代码并将其放入模态框的主体，但模态框后面的页面正在滚动而不是模态框的窗口。

我已在脚本中的选择器中添加了.modal 类，以便滚动模式（我在 stackoverflow 上的一些帖子中发现）但似乎无法正常工作。

我是否遗漏了代码中的某些内容？ 我应该如何进行？谢谢

Answer 1

当您复制并粘贴代码时，您还复制了 ID scroll_icon。 Id 是唯一标识符，使您能够使用 CSS 或 JavaScript 来定位特定的 DOM 元素。您需要更改模态框上的 id 以及与之关联的代码。

Answer 2

$(document).ready(function (e){
  $(function () {
    $(document).on('click','.scroll_id',function (e) {
        e.preventDefault();
        var $win = $(window);
        var scrollTarget = $win.height() + $win.scrollTop() + 1 >= $(document).height() ? 0 : $win.scrollTop() + $win.height();

       if($(this).parent('.modal').length) {
           var $scrCont = $(".modal")
       }
       else {
           var $scrCont = $("html, body");
       }

       $($scrCont).animate({
        scrollTop: scrollTarget
    }, 600);

   });
});

});

您可以识别按钮的父级并为正确的组件设置动画。

如果我正确理解您的问题 -- https://jsfiddle.net/oerhbwr4/6/