Jquery Scroll function

Question

There is search button inside a div and a table inside another div.What I want is, when a user clicks on a button, this Jquery function will show him/her that table content after page reload.I'm using a Jquery function but it's not working on my end.Your help will be much appreciated.Thank you!

HTML:

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

This is a table that I want user to scroll to:

<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>

Mads K · Accepted Answer · 2016-03-27 14:50:27Z

1

It works perfectly fine here: https://jsfiddle.net/nfb5zc3d/ Are you sure that the JavaScript comes AFTER the HTML? Otherwise it won't be able to bind the event to the #scroll-button.

If you want to scroll AFTER a page reload, you have to inject the JavaScript into the page using PHP like for example:

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

edited Mar 27, 2016 at 14:50

answered Mar 27, 2016 at 14:31

Mads K

8372 gold badges14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aisha Salman Over a year ago

I've placed it after body tag @Mads K

Mads K Over a year ago

Then i assume you issue is that the page reloads, and it won't be able to remember that you clicked the button after the page-reload... therefore you have to use PHP to inject the scrolling-jQuery-part

Aisha Salman Over a year ago

Could you please provide that JavaScript code? @Mads K

Aisha Salman Over a year ago

Thank you so much :) @Mads K

Collectives™ on Stack Overflow

Jquery Scroll function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related