Невозможно прокручивать страницу, используя AngularJS в HTML

Question

У меня есть простой html-код, где у меня есть левое меню. Я хочу прокручивать содержимое при нажатии меню на одной странице. Также я не хочу прокручивать меню. Проблема в том, что я использую AngularJS, поэтому компилятор путается между маршрутизацией и логикой сегмента. Вот мое меню:

<div class="container"> 
    <div style="float: left;width:150px;"> 
     <ul class="list-group"> 
      <li class="list-group-item"><a href="#clinical">overview</a></li> 
      <li class="list-group-item">Clinical features</li> 
      <li class="list-group-item">Diagnosis</li> 
      <li class="list-group-item">Testing laboratories</li> 
      <li class="list-group-item">Result interpretation</li> 
     </ul> 
    </div> 

    <div class="col-md-10" id="clinical"> 
     <div class="row"> 
      <div class="col-md-2">Result interpretation</div> 
      <div class="col-md-10"> 
       <p style="text-align: right;">Back To Top</p> 
      </div> 
     </div> 
     <hr> 
     <p>Hey this is just to test.</p> 
    </div> 
</div> 

Answer 1

Это не является проблемой, характерной для AngularJS или что-нибудь еще. Это просто крошечная проблема с CSS:

Вы выравниваете свое меню с помощью float: left, что приведет к его появлению на левой границе, но при прокрутке (как вы заметили) оно не будет следовать за вами.

Решение довольно простое, просто прикрепите свое меню по-другому. Есть много различных способов сделать это, а также в зависимости от того, используете ли вы какие-либо библиотеки JavaScript (как Bootstrap), но самый простой подход будет прижав меню с помощью CSS:

.menubar { 
    /* A fixed alignment will ignore scroll bar positions */ 
    position: fixed; 

    /* Stretch the bar by forcing offsets and a width */ 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 150px; 
} 

Последнее, но не в последнюю очередь вам «придется переместить содержимое, чтобы он не скрыт в строке меню (которые в противном случае перекрываться бы):

.content { 
    padding-left: 150px; /* of course this could use positioning as well */ 
} 

You can try the whole thing in this jsFiddle.

Из вашего вопроса не ясно, идете ли вы ищете мягкую прокрутку, но для этого вы будете m ost, вероятно, хочет получить дополнительную библиотеку JavaScript, или вы можете просто использовать некоторую библиотеку, которая предоставляет все для вас (включая панель меню CSS и т. д.), например Bootstrap или UI Kit.