Jak obsługiwać łączenie skrótów kotwicy w AngularJS

318

Czy ktoś z was wie, jak ładnie obsługiwać łączenie skrótów kotwicy w AngularJS ?

Mam następujący znacznik dla prostej strony z najczęściej zadawanymi pytaniami

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

Po kliknięciu któregokolwiek z powyższych łączy AngularJS przechwytuje mnie i kieruje na zupełnie inną stronę (w moim przypadku strona 404, ponieważ nie ma tras pasujących do linków).

Moją pierwszą myślą było stworzenie pasującej trasy „ / faq /: rozdział ” i sprawdzenie odpowiedniego kontrolera $routeParams.chapterpo dopasowanym elemencie, a następnie użycie jQuery, aby przewinąć do niego.

Ale potem AngularJS znów sra na mnie i tak czy inaczej przewija do góry strony.

Czy ktoś tutaj zrobił coś podobnego w przeszłości i zna dobre rozwiązanie?

Edycja: Przejście na html5Mode powinno rozwiązać moje problemy, ale i tak musimy wesprzeć IE8 +, więc obawiam się, że nie jest to zaakceptowane rozwiązanie: /

Rasmus
źródło
Myślę, że ng-href=""zamiast tego sugeruje się użycie kątowe .
barana
10
Myślę, że ng-href ma zastosowanie tylko wtedy, gdy adres URL zawiera dane dynamiczne, które należy powiązać z modelem ng. Zastanawiam się, czy przypisujesz hashPrefiks do locationProvider, czy zignoruje on link do identyfikatora: docs.quarejs.org/guide/dev_guide.services.$location
Adam
Adam ma rację co do użycia ng-href.
Rasmus
Możliwe duplikaty linków Anchor w Angularjs?
Michaël Benjamin Saerens
Jest to również problem dotyczący nowego
Angulara

Odpowiedzi:

375

Szukasz $anchorScroll().

Oto (kiepska) dokumentacja.

A oto źródło.

Zasadniczo po prostu wstrzykujesz go i wywołujesz w kontrolerze, a on przewinie cię do dowolnego elementu z identyfikatorem znalezionym w $location.hash()

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

Oto plunker do zademonstrowania

EDYCJA: aby użyć tego z routingiem

Skonfiguruj routing kątowy jak zwykle, a następnie dodaj następujący kod.

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

a Twój link wyglądałby tak:

<a href="#/test?scrollTo=foo">Test/Foo</a>

Oto Plunker pokazujący przewijanie z routingiem i $ anchorScroll

A jeszcze prostsze:

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

a Twój link wyglądałby tak:

<a href="#/test#foo">Test/Foo</a>
Ben Lesh
źródło
5
Problem może pojawić się po dodaniu routingu: jeśli dodasz ngView każda zmiana skrótu adresu URL spowoduje przeładowanie trasy ... W twoim przykładzie nie ma routingu, a adres URL nie odzwierciedla bieżącego elementu ... Ale dzięki za wskazanie $ anchorScroll
Valentyn Shybanov
1
@ rozwiązywanie problemów, wywołanie location.hash (X) zmienia stronę, ponieważ routing kontroluje widoki.
dsldsl
24
To rozwiązanie powoduje ponowne renderowanie całej mojej aplikacji.
2
@dsldsl && @OliverJosephAsh: $ location.hash () nie przeładuje strony. Jeśli tak, dzieje się coś jeszcze. Oto ten sam czas, który jest zapisywany podczas ładowania strony, zobaczysz, że się nie zmienia Jeśli chcesz przewinąć do tagu kotwicy na bieżącej stronie bez ponownego ładowania trasy, po prostu zrób zwykły link <a href="#foo">foo</a>. Mój przykładowy kod miał pokazywać przewijanie do identyfikatora przy zmianie trasy.
Ben Lesh
4
@ rozwiązywanie problemów: zalecam również usunięcie skrótu po przewinięciu do żądanej sekcji, w ten sposób URL nie jest zanieczyszczany przez rzeczy, których tak naprawdę nie powinno tam być. Użyj tego: $location.search('scrollTo', null)
kumarharsh
168

W moim przypadku zauważyłem, że logika routingu się uruchamiała, jeśli zmodyfikowałem $location.hash(). Następująca sztuczka zadziałała ..

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};
slugslog
źródło
5
Genialne dzięki za to, logika routingu absolutnie nie zachowywała się nawet przy użyciu rozwiązania @ blesh .run (...), i to sortuje.
ljs 25.04.13
8
Twoja sztuczka polegająca na „uratowaniu starego skrótu” była absolutnym ratownikiem. Zapobiega przeładowaniu strony, utrzymując trasę w czystości. Świetny pomysł!
ThisLanham,
2
Niezłe. Ale po wdrożeniu rozwiązania adres URL nie aktualizuje wartości docelowego identyfikatora.
Mohamed Hussain
1
Miałem takie same doświadczenia jak Mohamed ... Rzeczywiście zatrzymało to przeładowanie, ale wyświetla trasę bez skrótów (i $ anchorScroll nie miał żadnego efektu). 1.2.6 Hmmmm.
Michael
3
Używam $location.hash(my_id); $anchorScroll; $location.hash(null). Zapobiega przeładowaniu i nie muszę zarządzać oldzmienną.
MFB,
53

Nie trzeba zmieniać żadnego routingu ani niczego innego, czego trzeba użyć target="_self"podczas tworzenia łączy

Przykład:

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

I użyj idatrybutu w swoich elementach HTML takich jak:

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Nie ma potrzeby używania ## jak wskazano / wspomniano w komentarzach ;-)

Mauricio Gracia Gutierrez
źródło
1
Dla mnie to nie zadziałało, ale rozwiązanie tutaj: stackoverflow.com/a/19367249/633107
Splaktar
6
Dzięki za to rozwiązanie. Ale cel = „_ self” jest wystarczający. Nie trzeba podwoić #
Christophe P
5
target = "_ self" jest zdecydowanie najlepszą odpowiedzią (nie trzeba podwójnie #, jak zauważył Christophe P). Działa to bez względu na to, czy Html5Mode jest włączony czy wyłączony.
newman
3
Prosty i kompletny. Pracował dla mnie bez potrzeby dodawania kolejnej zależności kątowej.
adeady
4
To jest właściwe rozwiązanie. Nie trzeba angażować usługi kątowej $ anchorScroll. Zobacz dokumentację dla tagu: https://developer.mozilla.org/en/docs/Web/HTML/Element/a
Yiling
41
<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>
Lincoln
źródło
Niesamowite! Zdecydowanie najprostsze rozwiązanie, ale jakiś pomysł, jak połączyć z kotwicą na osobnej stronie? (tj. / products # books)
8bithero
Myślę, że jest to to samo co rozwiązanie (/ produkty ## books) w AngularJS
lincolnge
1
Z mojego doświadczenia wynika, że ​​href = "##" działa tylko po wstrzyknięciu $ anchorScroll.
Brian Park,
9
wydaje się to stosunkowo proste, ale nie działa :-(
brykneval
4
Dodałem target = "_ self" i działało to jak urok dla każdego rodzaju nawigacji na stronie (czytaj suwaki, przechodząc do różnych sekcji i tak dalej). Dziękujemy za podzielenie się tą świetną i najprostszą sztuczką.
Kumar Nitesh
19

Jeśli zawsze znasz trasę, możesz po prostu dołączyć kotwicę w następujący sposób:

href="#/route#anchorID

gdzie routejest bieżąca trasa kątowa i anchorIDpasuje <a id="anchorID">gdzieś na stronie

kabina 1113
źródło
1
To powoduje normalną zmianę trasy AngularJS i dlatego jest odradzane. W moim przypadku było to bardzo wizualne, ponieważ filmy z YouTube na stronie FAQ / pomocy zostały ponownie załadowane.
Robin Andersson,
9
@ RobinWassén-Andersson, określając reloadOnSearch: falsetę trasę w konfiguracji tras, kątowy nie spowoduje zmiany trasy i po prostu przewinie do identyfikatora. W połączeniu z pełną trasą określoną w atagu powiedziałbym, że jest to najprostsze i najprostsze rozwiązanie.
Elise
Dziękuję Ci. To mi pomogło. Nie używam żadnych niestandardowych tras w mojej aplikacji, więc robienie href = "# / # anchor-name" działało świetnie!
Jordan
14

$anchorScroll działa w tym celu, ale istnieje znacznie lepszy sposób na użycie go w nowszych wersjach Angulara.

Teraz $anchorScrollakceptuje skrót jako opcjonalny argument, więc nie musisz go wcale zmieniać $location.hash. ( dokumentacja )

To najlepsze rozwiązanie, ponieważ w ogóle nie wpływa na trasę. Nie mogłem zmusić żadnego z innych rozwiązań do działania, ponieważ używam ngRoute, a trasa załaduje się ponownie, gdy tylko ustawię $location.hash(id), zanim będzie $anchorScrollmogła wykonać swoją magię.

Oto jak go użyć ... po pierwsze, w dyrektywie lub kontrolerze:

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

a następnie w widoku:

<a href="" ng-click="scrollTo(id)">Text</a>

Ponadto, jeśli musisz uwzględnić stały pasek nawigacyjny (lub inny interfejs użytkownika), możesz ustawić przesunięcie dla $ anchorScroll w następujący sposób (w funkcji uruchamiania modułu głównego):

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});
Rebecca
źródło
Dzięki. W jaki sposób wdrożyłbyś swoją strategię dotyczącą łącza skrótu w połączeniu ze zmianą trasy? Przykład: kliknij ten element nawigacyjny, który otwiera inny widok i przewija w dół do określonego idw tym widoku.
Kyle Vassella
Sire to pester ... Jeśli masz szansę, możesz rzucić okiem na moje pytanie Stack? Czuję odpowiedź tutaj ma zdobyć mnie tak blisko, ale po prostu nie mogę wdrożyć go: stackoverflow.com/questions/41494330/... . Ja też używam ngRoutei nowszej wersji Angulara.
Kyle Vassella
Przepraszam, że nie próbowałem tego konkretnego przypadku ... ale czy spojrzałeś na $ location.search () lub $ routeParams ? Być może możesz użyć jednego lub drugiego przy inicjalizacji kontrolera - jeśli parametr scrollTo search znajduje się w adresie URL, wówczas kontroler może użyć $ anchorScroll jak wyżej do przewijania strony.
Rebecca
2
Przekazując identyfikator bezpośrednio do $ anchorScroll, moje trasy zmieniły się z czegoś takiego jak / contact # contact na just / contact. To powinna być przyjęta odpowiedź imho.
RandomUs1r
12

To było moje rozwiązanie wykorzystujące dyrektywę, która wydaje się bardziej kątowa, ponieważ mamy do czynienia z DOM:

Plnkr tutaj

github

KOD

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

HTML

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

Korzystałem z usługi $ anchorScroll. Aby przeciwdziałać odświeżaniu strony, które towarzyszy zmianie skrótu, poszedłem do przodu i anulowałem zdarzenie locationChangeStart. To działało dla mnie, ponieważ miałem stronę pomocy podłączoną do przełącznika ng, a odświeżenia zasadniczo spowodowałyby uszkodzenie aplikacji.

Khalil Rawanna
źródło
Podoba mi się twoje rozwiązanie dyrektywy. Jednak jak to zrobić, chcesz załadować inną stronę i jednocześnie przewinąć do lokalizacji kotwicy. Bez angularjs będzie to nominalnie href = "hash # location". Ale twoja dyrektywa zapobiega przeładowaniu strony.
CMCDragonkai,
@CMCDragonkai z moją dyrektywą, nie jestem pewien, ponieważ korzystam z wywołania $ $ anchorScroll, które wygląda na to, że obsługuje tylko przewijanie do elementu aktualnie na stronie. Być może będziesz musiał zadzierać z $ location lub $ window, aby uzyskać coś związanego ze zmianą strony.
KhalilRavanna
2
Musisz cofnąć rejestrację ze zdarzenia locationChangeStart: var off = scope. $ On ('$ locationChangeStart', function (ev) {off (); ev.preventDefault ();});
Dobry chwyt @EugeneTskhovrebov, poszedłem dalej i dodałem to do odpowiedzi w edycji.
KhalilRavanna
5

Spróbuj ustawić prefiks skrótu dla tras kątowych $locationProvider.hashPrefix('!')

Pełny przykład:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])
Maxim Grach
źródło
To nie wpływa na wynik. Byłoby jednak słodko.
Rasmus
2
Jesteś pewny. Dlaczego to nie działa? Jeśli prefiksem skrótu jest!, To routingiem skrótu powinna być strona #! Dlatego AngularJS powinien wykryć, gdy jest to tylko skrót, powinien zakotwiczyć przewijanie automatycznie i działać zarówno dla adresów URL trybu HTML5, jak i adresów URL trybu mieszania.
CMCDragonkai,
5

Obejrzałem to w logice trasy dla mojej aplikacji.

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}
nicksanta
źródło
1
To nie działa: Błąd: [$ injector: modulerr] Nie udało się utworzyć kąta modułu z powodu: Błąd: niepoprawny „moduł obsługi” w when ()
geoidesic
5

To jest stary post, ale długo szukałem różnych rozwiązań, więc chciałem podzielić się jeszcze jednym prostym. Właśnie dodanie target="_self"do <a>tagu naprawiło to dla mnie. Link działa i zabiera mnie do właściwej lokalizacji na stronie.

Jednak Angular nadal wprowadza dziwność z # w adresie URL, więc możesz napotkać problemy przy użyciu przycisku Wstecz do nawigacji i tak po użyciu tej metody.

Benzoes
źródło
4

Może to być nowy atrybut ngView, ale udało mi się uzyskać linki kotwiczące do pracy z angular-routeużyciem ngView autoscrollatrybutu i „podwójnych skrótów”.

ngView (patrz automatyczne przewijanie)

(Poniższy kod został użyty z paskiem kątowym)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>
Michał
źródło
3

Mógłbym to zrobić tak:

<li>
<a href="#/#about">About</a>
</li>
Niru
źródło
2

Oto rodzaj nieprzyjemnego obejścia, tworząc niestandardową dyrektywę, która będzie przewijać do określonego elementu (z zakodowanym „faq”)

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

Valentyn Shybanov
źródło
To rzeczywiście działa, ale, jak powiedziałeś, jest brudne. Bardzo brudny. Zobaczmy, czy ktoś inny może wymyślić ładniejsze rozwiązanie, albo będę musiał to zrobić.
Rasmus
Angular ma już wbudowaną funkcję scrollTo $anchorScroll, patrz moja odpowiedź.
Ben Lesh
Zmieniono plunker, aby był mniej brudny: używa $ location.path (), więc w źródle nie ma zakodowanego „faq”. Próbowałem też użyć $ anchorScroll, ale wydaje się, że z powodu routingu to nie działa ...
Valentyn Shybanov
2
<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>
felipe_dmz
źródło
2

Jeśli nie chcesz używać, ng-clickoto alternatywne rozwiązanie. Używa a filterdo wygenerowania poprawnego adresu URL na podstawie bieżącego stanu. Mój przykład używa ui.router .

Zaletą jest to, że użytkownik zobaczy, gdzie link przechodzi w dymek.

<a href="{{ 'my-element-id' | anchor }}">My element</a>

Filtr:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])
Reimund
źródło
2

Moim rozwiązaniem z ng-route była ta prosta dyrektywa:

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

HTML wygląda następująco:

<a href="" scrollTo="yourid">link</a>
MrFlo
źródło
Czy nie musiałbyś określać atrybutu like scroll-to="yourid"i nazwać dyrektywę scrollTo(i uzyskać do niego dostęp jako attrs["scrollTo"]? Poza tym, bez wyraźnego włączenia jQuery, program obsługi musi być związany element.on('click', function (e) {..}).
Theodros Zelleke
1

Możesz spróbować użyć anchorScroll .

Przykład

Tak więc kontrolerem będzie:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

I widok:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... i nie ma tajemnicy dla identyfikatora kotwicy:

<div id="foo">
  This is #foo
</div>
Edmar Miyake
źródło
1

Próbowałem zmusić moją aplikację Angular do przewinięcia do ładowania kotwicy i natknąłem się na reguły przepisywania adresów URL $ routeProvider.

Po długich eksperymentach zdecydowałem się na to:

  1. zarejestruj moduł obsługi zdarzeń document.onload w sekcji .run () modułu aplikacji Angular.
  2. w module obsługi dowiedz się, jaki miał być oryginał w tagu anchor, wykonując kilka operacji na łańcuchach.
  3. override location.hash ze zmniejszonym tagiem kotwicy (co powoduje, że $ routeProvider natychmiast zastępuje go ponownie swoją regułą „# /”. Ale to dobrze, ponieważ Angular jest teraz zsynchronizowany z tym, co dzieje się w adresie URL 4) $ anchorScroll ().

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

Stoyan Kenderov
źródło
1

Nie jestem w 100% pewien, czy to działa cały czas, ale w mojej aplikacji daje to oczekiwane zachowanie.

Powiedzmy, że jesteś na stronie O NAS i masz następującą trasę:

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

Teraz w tobie HTML

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

Podsumowując

Uwzględnienie nazwy strony, zanim kotwica załatwiła sprawę. Daj mi znać o swoich myślach.

Minusem

Spowoduje to ponowne renderowanie strony, a następnie przewinięcie do kotwicy.

AKTUALIZACJA

Lepszym sposobem jest dodanie następujących elementów:

<a href="#tab1" onclick="return false;">First Part</a>
Brian
źródło
1

Uzyskaj łatwo funkcję przewijania. Obsługuje także przewijanie animowane / płynne jako dodatkową funkcję. Szczegóły dotyczące biblioteki Angular Scroll :

Github - https://github.com/oblador/angular-scroll

Altana :bower install --save angular-scroll

npm :npm install --save angular-scroll

Wersja Minfied - tylko 9kb

Płynne przewijanie (animowane przewijanie) - tak

Przewiń Szpiega - tak

Dokumentacja - doskonała

Demo - http://oblador.github.io/angular-scroll/

Mam nadzieję że to pomoże.

Akash
źródło
1

Na podstawie @Stoyan opracowałem następujące rozwiązanie:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});
ThatMSG
źródło
0

Przy zmianie trasy przewinie się do góry strony.

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

umieść ten kod na kontrolerze.

Praveen MP
źródło
0

Moim zdaniem @slugslog miał to, ale chciałbym zmienić jedną rzecz. Zamiast tego użyłbym zamiennika, więc nie trzeba go ustawiać z powrotem.

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

Dokumenty Wyszukaj „Zamień metodę”

Jackie
źródło
0

Żadne z powyższych rozwiązań nie działa dla mnie, ale właśnie wypróbowałem to i zadziałało,

<a href="#/#faq-1">Question 1</a>

Uświadomiłem sobie, że muszę powiadomić stronę, aby rozpocząć od strony indeksu, a następnie użyć tradycyjnej kotwicy.

windmaomao
źródło
0

Kiedyś w aplikacji angularjs nawigacja skrótu nie działa, a biblioteki javascript jquery bootstrap w szerokim zakresie wykorzystują ten rodzaj nawigacji, aby działał, dodając go target="_self"do tagu anchor. na przykład<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Kulbhushan Chaskar
źródło
0

Używam AngularJS 1.3.15 i wygląda na to, że nie muszę robić nic specjalnego.

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider

Tak więc w moim html działa dla mnie:

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

W ogóle nie musiałem wprowadzać żadnych zmian w moim kontrolerze ani JavaScript.

Digant C Kasundra
źródło