title: How to automatically scroll down on a modal via click on a button?
body: <p>I have a button on a page , when clicking on it, a scroll down is done , and if I'm on the bottom of the page when clicking on it, it scrolls up.</p>
  
  <pre><code>&lt;style&gt;
      .scroll_button {
          position: fixed;
          right: 35px;
          z-index: 100;
      }
  &lt;/style&gt;
  
  &lt;div class="scroll_button" style="bottom: 10px;"&gt;
      &lt;button id="scroll_id" class="btn btn-primary"&gt;
          &lt;span&gt; Click to Scroll&lt;/span&gt;&lt;br&gt;&lt;i id="scroll_icon" class="fa fa-chevron-circle-down"&gt;&lt;/i&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  //scroll up and down
  
      $(function () {
          $('#scroll_id').click(function (e) {
              e.preventDefault();
              var $win = $(window);
              var scrollTarget = $win.height() + $win.scrollTop() + 1 &gt;= $(document).height() ? 0 : $win.scrollTop() + $win.height()
              $("html, body, .modal").animate({
                  scrollTop: scrollTarget
              }, 600);
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have a modal in this page and I want to have the same button that scrolls the content of the modal when clicking on that button.</p>
  
  <p>So, I copied the html code the the button and put it to the body of the modal but  the page behind the modal was scrolling not the modal's window .</p>
  
  <p>I have added <code>.modal</code> class to the selectors in the script so that modal will be scrolled (I found that in some posts on stackoverflow) but seems to be not working.</p>
  
  <p>Do I miss something in the code ? 
  How should I proceed? Thanks</p>