Как отобразить весь выбранный элемент, когда HTML-страница находится в самой нижней позиции?

Question

Я работаю над проектом с шаблоном ace-1.3-master и пытаюсь установить выпадающий список кнопок, который я поместил в нижней части страницы HTML.

Моя проблема в том, что кнопка не отображает полностью ее содержимое, и пользователю необходимо прокрутить html-страницу вручную, чтобы просмотреть все содержимое кнопки.как я могу сделать это автоматически без прокрутки.

Положение кнопки

Answer 1

Наконец-то я нашел решение.Исходя из этого вопроса https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page

Я делаю то, что было сказано @ user5978325.Это решение, я создаю функцию, содержащую эту команду

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

, а затем привязываю ее к первому уровню из моего элемента кнопки

мой код выглядит так

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

Спасибо.

Answer 2

Попробуйте использовать положение: исправлено;в твоей кнопке css.Пример:

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