How to display whole selected element when html page is in the most bottom position?

Question

I am working project with ace-1.3-master template and try to instal button dropdown who I put in most the bottom on the page of HTML.

My problem is the button not display fully of it's content and user need to scrolling manually html page to see whole of the button content . how I can make it automaticly without scrolling.

The button position

Answer 1

Try use position:fixed; in your css button. Example:

div#myDIV {
    position:fixed;
    width:100px;
    height:100px;
    background:red;
    left:10px;
    top:100px;
}

Answer 2

Finally I find the solution. Based from this question https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page

I do what @user5978325 was said. This is the solution I create a function containing this command

 $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

and then bind it to first level from my button element

my code look like this

    <div class="btn-group">
      <button class="btn btn-white btn-primary"  >others</button>
        <button onclick="scrollToLowest()" data-toggle="dropdown"  class="btn btn-white btn-primary">
        <span class="ace-icon fa fa-caret-down icon-only"></span>
        </button>
     <ul class="dropdown-menu dropdown-success">
      <li>
        <a href="{{url('purchase_detail/download_pdf/'.$app_purchase_id)}}">Print Document PO</a>
        </li>
       <li>
      <a href="{{url('purchase_detail/send_po_to_email/'.$app_purchase_id)}}">Send PO To Email</a>
    </li>   
    <li class="divider"></li>
</ul>
</div>

<script>
   function scrollToLowest(){
     $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
   }
</script>

Thanks.