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

我在页面上有一个按钮，点击它时，向下滚动，如果我点击页面底部，它会向上滚动。如何通过点击按钮自动向下滚动模式？

<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），但似乎不工作。

我错过代码中的东西吗？我应该如何继续？由于

来源

2017-10-13 pietà

所以，你要自动滚动上点击的模式和点击不启用滚动？这是两件不同的事情。 –

对不起，我看不到你的意思，但我的意思是，当点击模式中的按钮时，它会向下滚动（如果达到模式的底部，则点击按钮将滚动到顶部） –

当您复制和粘贴，你也复制了ID scroll_icon的代码。 Id是唯一标识符，可让您使用CSS或JavaScript来定位特定的DOM元素。您需要更改模式上的ID和与其相关的代码。

来源

2017-10-13 14:40:22

$(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/

来源

2017-10-13 15:00:38

谢谢..但我不知道为什么它不适合我：/ 顺便说一句，为什么模式中的滚动按钮也在小提琴中滚动？ –

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

回答

相关问题