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

Object Storage Arubacloud
0 głosów
293 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ź 102 wizyt
+1 głos
3 odpowiedzi 346 wizyt
pytanie zadane 21 lutego 2016 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)
+1 głos
1 odpowiedź 649 wizyt
pytanie zadane 6 lutego 2016 w HTML i CSS przez MatiiTv Gaduła (3,790 p.)

92,655 zapytań

141,544 odpowiedzi

319,969 komentarzy

62,024 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...