• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Angular - nawigacja w obrębie jednego komponetu między akapitami.

Aruba Cloud - Virtual Private Server VPS
0 głosów
420 wizyt
pytanie zadane 17 sierpnia 2017 w JavaScript przez Perkos Początkujący (290 p.)
zamknięte 30 października 2017 przez Perkos

Witam, nie wiem jak stworzyć menu które nawigowało by w obębie jednej strony między np. akapitami. Czy istnieje w angular funkcja typu $anchorscroll, która działała w podobny sposób. Mi jeszcze nie udało się takiej znaleźć. Używam routingu do nawigacji po między stronami, ale nie wiem jak zastosować to w przypadku poruszania się w jednym komponencie. Będę wdzięczny za wszelkie infomracje. 
 


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h1>{{ restaurant.name }}</h1>
    </div>
    <div class="col-xs-8" id="menu-detail">
      <nav class="navbar navbar-default">
        <ul class="nav navbar-nav" id="menu">
          <li><a routerLink="#menur" id="about" >About</a></li>
          <li><a >Menu</a></li>
          <li><a href="#review">Reviews</a></li>
        </ul>
      </nav>
    </div>

    <div class="container">
    <div class="col-xs-8">
      <h2>{{ restaurant.description }}</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum urna mi, non luctus lectus suscipit vel. Proin aliquet iaculis auctor. Mauris venenatis massa eget velit porta molestie. Morbi nunc diam, convallis non ornare at, accumsan eu dui. Mauris eu velit tincidunt, sagittis purus in, congue nunc. Mauris consectetur eu neque et suscipit. Aenean arcu orci, iaculis et tempor vel, egestas ac lorem. Quisque et dolor quis felis aliquam suscipit quis vitae orci. Sed vestibulum nunc purus, id tincidunt odio laoreet convallis. Vivamus commodo venenatis est, vel pretium dolor semper at. Nulla ut aliquam tellus, a ornare dui. In ante libero, interdum vitae vehicula sed, rhoncus sit amet erat. Donec laoreet sed justo in hendrerit. Mauris vulputate eleifend quam. Sed cursus, justo eget consequat sagittis, sapien augue ultrices orci, quis imperdiet justo nulla malesuada quam.</p>

<p> dictum leo eu molestie dictum. Etiam at vulputate urna. Proin aliquet tincidunt arcu, imperdiet posuere felis aliquam eu. In ac ultrices risus, sit amet lacinia arcu. Nam vulputate nulla hendrerit justo tincidunt, a posuere felis semper. Curabitur vestibulum finibus eros nec consectetur. Vestibulum dapibus dolor in lorem hendrerit, et auctor ligula pulvinar. Integer ut metus vel lectus efficitur porttitor. Praesent condimentum arcu consectetur ante consequat volutpat. Praesent eget malesuada velit. Nullam eu metus sit amet tortor tempus tempus a at nibh. Curabitur laoreet consectetur sem, sed convallis magna pharetra a. Donec pellentesque turpis vitae facilisis volutpat. Nullam nisl mauris, interdum sit amet leo nec, lobortis dictum est. Donec eleifend, sem in fermentum dignissim, lectus est elementum ligula, sit amet tincidunt ligula odio sagittis mi.</p>

<p>Sed vitae turpis vitae eros hendrerit fringilla. Aliquam ut facilisis nisi, quis ultrices ipsum. Etiam non cursus risus. Ut non risus nunc. Nullam magna nibh, mattis a commodo quis, varius hendrerit nulla. Integer eu metus a est tempor ullamcorper. Duis suscipit metus dolor, et ornare nibh dictum vel.</p>
    </div>

    <div class="col-xs-8" id="menur">
      <h3>Menu Restauracji</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum urna mi, non luctus lectus suscipit vel. Proin aliquet iaculis auctor. Mauris venenatis massa eget velit porta molestie. Morbi nunc diam, convallis non ornare at, accumsan eu dui. Mauris eu velit tincidunt, sagittis purus in, congue nunc. Mauris consectetur eu neque et suscipit. Aenean arcu orci, iaculis et tempor vel, egestas ac lorem. Quisque et dolor quis felis aliquam suscipit quis vitae orci. Sed vestibulum nunc purus, id tincidunt odio laoreet convallis. Vivamus commodo venenatis est, vel pretium dolor semper at. Nulla ut aliquam tellus, a ornare dui. In ante libero, interdum vitae vehicula sed, rhoncus sit amet erat. Donec laoreet sed justo in hendrerit. Mauris vulputate eleifend quam. Sed cursus, justo eget consequat sagittis, sapien augue ultrices orci, quis imperdiet justo nulla malesuada quam.</p>

<p> dictum leo eu molestie dictum. Etiam at vulputate urna. Proin aliquet tincidunt arcu, imperdiet posuere felis aliquam eu. In ac ultrices risus, sit amet lacinia arcu. Nam vulputate nulla hendrerit justo tincidunt, a posuere felis semper. Curabitur vestibulum finibus eros nec consectetur. Vestibulum dapibus dolor in lorem hendrerit, et auctor ligula pulvinar. Integer ut metus vel lectus efficitur porttitor. Praesent condimentum arcu consectetur ante consequat volutpat. Praesent eget malesuada velit. Nullam eu metus sit amet tortor tempus tempus a at nibh. Curabitur laoreet consectetur sem, sed convallis magna pharetra a. Donec pellentesque turpis vitae facilisis volutpat. Nullam nisl mauris, interdum sit amet leo nec, lobortis dictum est. Donec eleifend, sem in fermentum dignissim, lectus est elementum ligula, sit amet tincidunt ligula odio sagittis mi.</p>

<p>Sed vitae turpis vitae eros hendrerit fringilla. Aliquam ut facilisis nisi, quis ultrices ipsum. Etiam non cursus risus. Ut non risus nunc. Nullam magna nibh, mattis a commodo quis, varius hendrerit nulla. Integer eu metus a est tempor ullamcorper. Duis suscipit metus dolor, et ornare nibh dictum vel.</p>
    </div>
    <div class="col-xs-8" id="review">
      <h4>Review</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum urna mi, non luctus lectus suscipit vel. Proin aliquet iaculis auctor. Mauris venenatis massa eget velit porta molestie. Morbi nunc diam, convallis non ornare at, accumsan eu dui. Mauris eu velit tincidunt, sagittis purus in, congue nunc. Mauris consectetur eu neque et suscipit. Aenean arcu orci, iaculis et tempor vel, egestas ac lorem. Quisque et dolor quis felis aliquam suscipit quis vitae orci. Sed vestibulum nunc purus, id tincidunt odio laoreet convallis. Vivamus commodo venenatis est, vel pretium dolor semper at. Nulla ut aliquam tellus, a ornare dui. In ante libero, interdum vitae vehicula sed, rhoncus sit amet erat. Donec laoreet sed justo in hendrerit. Mauris vulputate eleifend quam. Sed cursus, justo eget consequat sagittis, sapien augue ultrices orci, quis imperdiet justo nulla malesuada quam.</p>

<p> dictum leo eu molestie dictum. Etiam at vulputate urna. Proin aliquet tincidunt arcu, imperdiet posuere felis aliquam eu. In ac ultrices risus, sit amet lacinia arcu. Nam vulputate nulla hendrerit justo tincidunt, a posuere felis semper. Curabitur vestibulum finibus eros nec consectetur. Vestibulum dapibus dolor in lorem hendrerit, et auctor ligula pulvinar. Integer ut metus vel lectus efficitur porttitor. Praesent condimentum arcu consectetur ante consequat volutpat. Praesent eget malesuada velit. Nullam eu metus sit amet tortor tempus tempus a at nibh. Curabitur laoreet consectetur sem, sed convallis magna pharetra a. Donec pellentesque turpis vitae facilisis volutpat. Nullam nisl mauris, interdum sit amet leo nec, lobortis dictum est. Donec eleifend, sem in fermentum dignissim, lectus est elementum ligula, sit amet tincidunt ligula odio sagittis mi.</p>

<p>Sed vitae turpis vitae eros hendrerit fringilla. Aliquam ut facilisis nisi, quis ultrices ipsum. Etiam non cursus risus. Ut non risus nunc. Nullam magna nibh, mattis a commodo quis, varius hendrerit nulla. Integer eu metus a est tempor ullamcorper. Duis suscipit metus dolor, et ornare nibh dictum vel.</p>
    </div>
    </div>
  </div>
</div>

 

komentarz zamknięcia: Problem rozwiązany
komentarz 17 sierpnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

Wnioskując po użyciu dyrektywy ng-controller, korzystasz z AngularJS (1.x), a tam przecież jest funkcja $anchorScroll

komentarz 17 sierpnia 2017 przez Perkos Początkujący (290 p.)
Korzystam z najnowszego angulara , to pozostałości po próbie uruchomienia $anchorScroll. Próbowałem róznych sposóbów i może kod nie jest zbyt przejrzysty.
1
komentarz 17 sierpnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

Korzystam z najnowszego angulara

To nie mieszaj kodu 1.x z 2+.

Tu masz bibliotekę od tego: https://github.com/Nolanus/ng2-page-scroll

Ale zanim ją wypróbujesz, to czy bawiłeś się Location i HashLocationStrategy? Na przykład metoda go() z przekazaniem jako parametru hasha lub aktualnego adresu (pobierzesz przez metodę path()) + hash z nazwą anchora.

komentarz 23 sierpnia 2017 przez Perkos Początkujący (290 p.)
Pierwsza biblioteka działa bez problemu. Drugą metodą mi się nie udało tego wykonać.

Podobne pytania

0 głosów
1 odpowiedź 127 wizyt
+1 głos
3 odpowiedzi 424 wizyt
pytanie zadane 21 lutego 2016 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)
+1 głos
1 odpowiedź 698 wizyt
pytanie zadane 6 lutego 2016 w HTML i CSS przez MatiiTv Gaduła (3,800 p.)

93,327 zapytań

142,323 odpowiedzi

322,397 komentarzy

62,658 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...