Jqueryスクロール機能

Question

div内に検索ボタンがあり、別のdiv内に表があります。ユーザーがボタンをクリックすると、このJquery関数はページのリロード後にその表の内容を表示します。私はJquery関数を使用していますが、それは私の最後に働いていません。あなたの助けが大いに感謝されるでしょう。ありがとう！

HTML：

<div class="col-md-4 search-btn"> 
    <button id="scroll" type="submit" name="submit" class="btn btn-primary">Search</button> 
</div> 

これは私がユーザーがスクロールするテーブルです：

<div class="table-responsive"> 
    <table class="table table-bordered table-striped"> 
        <thead style="font-weight:bold; background-color:cornflowerblue;"> 
         <tr align="center"> 
          <td>No.</td> 
          <td>Title</td> 
          <td>Author</td> 
          <td>Publication</td> 
          <td>Status</td> 
         </tr> 
        </thead> 
        <tbody> 
         <?php 

          foreach ($display as $key) { ?> 

         <tr align="center"> 
          <td><?php echo $count++;?></td> 
          <td><?php echo $key['ebook_title'];?></td> 
          <td><?php echo $key['ebook_author'];?></td> 
          <td><?php echo $key['ebook_publication'];?></td> 
          <td> 
           <a href="./admin/ebooks/<?php echo $key['ebook_url'];?>" type="application/octet-stream" class="btn btn-round btn-info" download>Download</a> 
          </td> 
         </tr> 
         <?php } ?> 

        </tbody> 
       </table> 
      </div> 

のjQuery：

<script type="text/javascript"> 
$("#scroll").click(function() { 
    $('html,body').animate({ 
     scrollTop: $(".table").offset().top}, 
     'slow'); 
}); 
</script> 

Answer 1

ここは完全に正常に動作します：https://jsfiddle.net/nfb5zc3d/ はありますあなたはJavaScriptがHTMLの後に来ることを確かめますか？それ以外の場合は、イベントをスクロールボタンにバインドすることはできません。

ページのリロード後にスクロールする場合は、例えばのようにPHPを使用して、ページにJavaScriptを注入する必要があります。

<?php 
    if(isset($_POST['submit'])) { 
    ?> 
    <script> 
     $(document).ready(function() { 
     $('html,body').animate({ 
      scrollTop: $(".table").offset().top}, 
      'slow'); 
     }); 
    </script> 
    <?php 
    } 
    ?>