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/

如何通过点击按钮自动向下滚动模态？

2 个答案: