ボタンをクリックしてモーダルを自動的にスクロールダウンする方法は？

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/