Cara menangani tautan hash jangkar di AngularJS


318

Apakah ada di antara Anda yang tahu cara menangani tautan hash dengan baik di AngularJS ?

Saya memiliki markup berikut untuk halaman FAQ sederhana

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

Ketika mengklik salah satu tautan di atas AngularJS memotong dan merutekan saya ke halaman yang sama sekali berbeda (dalam kasus saya, 404 halaman karena tidak ada rute yang cocok dengan tautan tersebut.)

Pikiran pertama saya adalah membuat rute yang cocok dengan " / faq /: bab " dan di controller yang sesuai memeriksa $routeParams.chaptersetelah elemen yang cocok dan kemudian menggunakan jQuery untuk menggulir ke bawah ke sana.

Tapi kemudian AngularJS marah pada saya lagi dan hanya menggulir ke bagian atas halaman.

Jadi, ada orang di sini yang pernah melakukan hal serupa di masa lalu dan tahu solusi yang baik untuk itu?

Sunting: Beralih ke html5Mode harus menyelesaikan masalah saya, tetapi kami agaknya harus mendukung IE8 + jadi saya khawatir ini bukan solusi yang diterima: /


Saya pikir menyarankan sudut untuk digunakan ng-href=""sebagai gantinya.
dukung

10
Saya pikir ng-href hanya berlaku jika url berisi data dinamis yang perlu terikat ke model-ng. Saya agak heran jika Anda menetapkan hashPrefix ke locationProvider jika itu akan mengabaikan tautan ke ID: docs.angularjs.org/guide/dev_guide.services.$location
Adam

Adam benar dalam penggunaan ng-href.
Rasmus


Ini juga merupakan masalah untuk Angular baru: stackoverflow.com/questions/36101756/…
phil294

Jawaban:


375

Anda sedang mencari $anchorScroll().

Inilah dokumentasi (jelek).

Dan inilah sumbernya.

Pada dasarnya Anda hanya menyuntikkannya dan memanggilnya di controller Anda, dan itu akan menggulir Anda ke elemen apa pun dengan id ditemukan di $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>

Berikut ini adalah salah satu pendongkrak untuk diperagakan

EDIT: untuk menggunakan ini dengan routing

Atur perutean sudut Anda seperti biasa, lalu tambahkan saja kode berikut.

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();  
  });
});

dan tautan Anda akan terlihat seperti ini:

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

Berikut ini adalah seorang Plunker yang menunjukkan pengguliran dengan perutean dan $ anchorScroll

Dan bahkan lebih sederhana:

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();  
  });
});

dan tautan Anda akan terlihat seperti ini:

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

5
Masalah dapat muncul saat Anda menambahkan perutean: jika menambahkan ngView setiap perubahan hasl url akan memicu pemuatan rute ... Dalam contoh Anda, tidak ada perutean dan url tidak mencerminkan item saat ini ... Tapi terima kasih telah menunjuk ke $ anchorScroll
Valentyn Shybanov

1
@blesh, memanggil location.hash (X) mengubah halaman karena perutean mengontrol tampilan.
dsldsl

24
Solusi ini menyebabkan seluruh aplikasi saya render ulang.

2
@dsldsl && @OliverJosephAsh: $ location.hash () tidak akan memuat ulang halaman. Jika ya, ada hal lain yang terjadi. Berikut adalah kumpulan yang sama dengan waktu yang ditulis saat halaman dimuat, Anda akan melihatnya tidak berubah Jika Anda ingin menggulir ke tag jangkar pada halaman saat ini tanpa memuat ulang rute, Anda hanya perlu melakukan tautan reguler <a href="#foo">foo</a>. Contoh kode saya adalah untuk menunjukkan gulir ke id di routechange.
Ben Lesh

4
@blesh: Saya sarankan Anda juga menghapus hash setelah menggulir ke bagian yang diinginkan, dengan cara ini URL tidak tercemar dengan hal-hal yang benar-benar tidak boleh ada. Gunakan ini: $location.search('scrollTo', null)
kumarharsh

168

Dalam kasus saya, saya perhatikan bahwa logika routing menendang jika saya memodifikasi $location.hash(). Trik berikut berhasil ..

$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);
};

5
Terima kasih yang luar biasa untuk itu, logika perutean benar-benar menolak untuk berperilaku bahkan ketika menggunakan .run (...) solusi @ blesh, dan ini mengatasinya.
ljs

8
Trik "menyelamatkan hash lama" Anda telah menjadi penyelamat mutlak. Ini mencegah halaman memuat ulang sekaligus menjaga rute tetap bersih. Ide yang luar biasa!
Lanham ini

2
Bagus Tetapi setelah menerapkan solusi Anda, url tidak memperbarui nilai id target.
Mohamed Hussain

1
Saya memiliki pengalaman yang sama dengan Mohamed ... Memang menghentikan reload tetapi menampilkan rute hashless (dan $ anchorScroll tidak berpengaruh). 1.2.6 Hmmmm.
Michael

3
Saya menggunakan $location.hash(my_id); $anchorScroll; $location.hash(null). Ini mencegah ulang dan saya tidak perlu mengelola oldvariabel.
MFB

53

Tidak perlu mengubah perutean apa pun atau apa pun hanya perlu digunakan target="_self"saat membuat tautan

Contoh:

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

Dan gunakan idatribut di html Anda elemen seperti ini:

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

Tidak perlu menggunakan ## seperti yang ditunjukkan / disebutkan dalam komentar ;-)


1
Ini tidak berhasil untuk saya, tetapi solusi di sini tidak: stackoverflow.com/a/19367249/633107
Splaktar

6
Terima kasih atas solusi ini. Tetapi target = "_ self" sudah cukup. Tidak perlu melipatgandakan #
Christophe P

5
target = "_ self" jelas merupakan jawaban terbaik (tidak perlu dua kali lipat #, seperti yang ditunjukkan oleh Christophe P). Ini berfungsi tidak masalah apakah Html5Mode aktif atau nonaktif.
Pendatang baru

3
Sederhana dan lengkap. Bekerja untuk saya tanpa perlu menambahkan lagi ketergantungan sudut.
adeady

4
Ini solusi yang tepat. Tidak perlu melibatkan layanan $ anchorScroll sudut. Lihat dokumentasi untuk sebuah tag: 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>

Luar biasa! Sejauh ini solusi paling sederhana, tetapi ada ide bagaimana menautkan ke jangkar pada halaman terpisah? (ie / produk # buku)
8bithero

Saya pikir itu sama dengan solusi (/ produk ## buku) di AngularJS
lincolnge

1
Dari pengalaman saya, href = "##" hanya bekerja ketika $ anchorScroll disuntikkan.
Brian Park

9
ini tampaknya relatif sederhana tetapi tidak berfungsi :-(
brykneval

4
Saya menambahkan target = "_ self" dan itu berfungsi seperti pesona untuk semua jenis navigasi di dalam halaman (baca slider, pergi ke bagian yang berbeda dan seterusnya). Terima kasih telah berbagi trik hebat dan sederhana ini.
Kumar Nitesh

19

Jika Anda selalu tahu rute, Anda bisa menambahkan jangkar seperti ini:

href="#/route#anchorID

di mana routerute sudut saat ini dan anchorIDcocok dengan suatu <a id="anchorID">tempat di halaman


1
Ini memicu perubahan rute AngularJS normal dan karenanya tidak disarankan. Dalam kasus saya itu sangat visual sejak video YouTube di halaman FAQ / Bantuan dimuat ulang.
Robin Andersson

9
@ RobinWassén-Andersson dengan menentukan reloadOnSearch: falseuntuk rute itu di konfigurasi rute Anda, angular tidak akan memicu perubahan rute dan hanya akan menggulir ke id. Dalam kombinasi dengan rute lengkap yang ditentukan dalam atag, saya akan mengatakan ini adalah solusi paling sederhana dan paling mudah.
Elise

Terima kasih. Ini membantu saya. Saya tidak menggunakan rute khusus di aplikasi saya, jadi melakukan href = "# / # anchor-name" bekerja sangat baik!
Jordan

14

$anchorScroll berfungsi untuk ini, tetapi ada cara yang lebih baik untuk menggunakannya di versi Angular yang lebih baru.

Sekarang, $anchorScrollterima hash sebagai argumen opsional, jadi Anda tidak perlu mengubah $location.hashsama sekali. ( dokumentasi )

Ini adalah solusi terbaik karena tidak mempengaruhi rute sama sekali. Saya tidak bisa mendapatkan solusi lain untuk bekerja karena saya menggunakan ngRoute dan rute akan dimuat kembali begitu saya atur $location.hash(id), sebelum $anchorScrollbisa melakukan keajaibannya.

Berikut adalah cara menggunakannya ... pertama, dalam arahan atau pengontrol:

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

dan kemudian di tampilan:

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

Selain itu, jika Anda perlu memperhitungkan navbar tetap (atau UI lainnya), Anda dapat mengatur offset untuk $ anchorScroll seperti ini (dalam fungsi menjalankan modul utama):

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

Terima kasih. Bagaimana Anda menerapkan strategi Anda untuk hash link yang dikombinasikan dengan perubahan rute? Contoh: klik item nav ini, yang membuka tampilan berbeda dan menggulir ke bawah ke spesifik iddalam tampilan itu.
Kyle Vassella

Sry to pester..Jika Anda mendapat kesempatan bisakah Anda memberikan pertanyaan Stack saya sekilas? Saya merasa jawaban Anda di sini telah membuat saya sangat dekat tetapi saya tidak bisa mengimplementasikannya: stackoverflow.com/questions/41494330/… . Saya juga menggunakan ngRoutedan versi Angular yang lebih baru.
Kyle Vassella

Maaf saya belum mencoba kasus khusus itu ... tetapi apakah Anda sudah melihat $ location.search () atau $ routeParams ? Mungkin Anda bisa menggunakan salah satu atau yang lain pada inisialisasi controller Anda - jika param pencarian scrollTo ada di URL, maka controller dapat menggunakan $ anchorScroll seperti di atas untuk menggulir halaman.
Rebecca

2
Dengan meneruskan Id langsung ke $ anchorScroll, rute saya berubah dari sesuatu seperti / contact # contact menjadi just / contact. Ini harus menjadi jawaban yang diterima imho.
RandomUs1r

12

Ini adalah solusi saya menggunakan arahan yang tampaknya lebih Angular-y karena kita berurusan dengan DOM:

Plnkr di sini

github

KODE

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>

Saya menggunakan layanan $ anchorScroll. Untuk mengatasi penyegaran-halaman yang sejalan dengan perubahan hash, saya melanjutkan dan membatalkan event locationChangeStart. Ini bekerja untuk saya karena saya memiliki halaman bantuan yang terhubung ke ng-switch dan refresh akan pada dasarnya merusak aplikasi.


Saya suka solusi arahan Anda. Namun bagaimana Anda melakukannya, Anda ingin memuat halaman lain dan gulir ke lokasi jangkar pada saat yang sama. Tanpa angularjs itu nominal akan menjadi href = "lokasi # hash". Tetapi arahan Anda mencegah pemuatan kembali halaman.
CMCDragonkai

@ CMCDragonkai dengan arahan saya, saya tidak yakin karena saya menggunakan panggilan ke $ anchorScroll yang sepertinya hanya menangani pengguliran ke elemen yang saat ini ada di halaman. Anda mungkin harus mengacaukan $ location atau $ window untuk mendapatkan sesuatu yang melibatkan perubahan halaman.
KhalilRavanna

2
Anda harus berhenti dari event locationChangeStart: var off = scope. $ On ('$ locationChangeStart', function (ev) {off (); ev.preventDefault ();});

Tangkapan yang bagus @EugeneTskhovrebov, saya teruskan dan menambahkannya ke jawaban dalam edit.
KhalilRavanna

5

Cobalah untuk mengatur awalan hash untuk rute sudut $locationProvider.hashPrefix('!')

Contoh lengkap:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

Ini tidak mempengaruhi hasilnya. Akan lebih manis.
Rasmus

2
Apakah kamu yakin Mengapa ini tidak berhasil? Jika awalan hash adalah!, Maka perutean hash harus halaman! Oleh karena itu AngularJS harus mendeteksi ketika itu hanya # hash, itu harus jangkar gulir secara otomatis dan bekerja untuk kedua url mode HTML5 dan url mode hash.
CMCDragonkai

5

Saya menyiasati ini dalam logika rute untuk aplikasi saya.

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;
      }
    });
}

1
Ini tidak berfungsi: Galat: [$ injector: modulerr] Gagal membuat sudut modul karena: Galat: 'handler' tidak valid di saat ()
geoidesic

5

Ini adalah pos lama, tetapi saya menghabiskan waktu lama meneliti berbagai solusi, jadi saya ingin berbagi satu lagi yang sederhana. Hanya menambahkan target="_self"pada <a>tag, memperbaikinya untuk saya. Tautan berfungsi dan membawa saya ke lokasi yang tepat di halaman.

Namun, Angular masih menyuntikkan keanehan dengan # di URL sehingga Anda dapat mengalami masalah menggunakan tombol kembali untuk navigasi dan semacamnya setelah menggunakan metode ini.


4

Ini mungkin atribut baru untuk ngView, tapi saya sudah bisa mendapatkannya tautan hash jangkar untuk bekerja dengan angular-routemenggunakan ngView autoscrollatribut dan 'hash ganda'.

ngView (lihat autoscroll)

(Kode berikut digunakan dengan angular-strap)

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

3

Saya bisa melakukan ini seperti ini:

<li>
<a href="#/#about">About</a>
</li>

2

Berikut adalah jenis penyelesaian kotor dengan membuat arahan khusus yang akan bergulir ke elemen tertentu (dengan "faq" hardcod)

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


Ini memang bekerja, tetapi, seperti yang Anda katakan, kotor. Sangat kotor. Mari kita lihat apakah ada orang lain yang bisa memberikan solusi yang lebih cantik, atau saya harus melakukannya.
Rasmus

Angular sudah memiliki fungsi scrollTo bawaan $anchorScroll, lihat jawaban saya.
Ben Lesh

Berubah plunker menjadi kurang kotor: ia menggunakan $ location.path () sehingga tidak ada "faq" dalam kode sumber. Dan juga mencoba menggunakan $ anchorScroll, tetapi tampaknya karena perutean itu tidak berfungsi ...
Valentyn Shybanov

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

2

Jika Anda tidak suka menggunakan di ng-clicksini solusi alternatif. Ini menggunakan filteruntuk menghasilkan url yang benar berdasarkan pada kondisi saat ini. Contoh saya menggunakan ui.router .

Manfaatnya adalah bahwa pengguna akan melihat di mana tautan berjalan melayang.

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

Filter:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

2

Solusi saya dengan ng-route adalah arahan sederhana ini:

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

HTML terlihat seperti:

<a href="" scrollTo="yourid">link</a>

Apakah Anda tidak harus menentukan atribut suka scroll-to="yourid"dan nama direktif scrollTo(dan mengakses atribut sebagai attrs["scrollTo"]? Selain itu, tanpa jQuery inklusi element.on('click', function (e) {..})
explorer

1

Anda dapat mencoba menggunakan anchorScroll .

Contoh

Jadi pengontrolnya adalah:

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

Dan tampilan:

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

... dan bukan rahasia untuk jangkar id:

<div id="foo">
  This is #foo
</div>

1

Saya mencoba membuat aplikasi Angular saya menggulir ke anchor opon loading dan berlari ke aturan penulisan ulang URL dari $ routeProvider.

Setelah lama bereksperimen, saya menyelesaikan ini:

  1. mendaftarkan document.onload event handler dari bagian .run () pada modul aplikasi Angular.
  2. dalam handler mencari tahu apa yang seharusnya memiliki tag anchor seharusnya dengan melakukan beberapa operasi string.
  3. timpa location.hash dengan tag anchor stripped down (yang menyebabkan $ routeProvider untuk segera menimpanya kembali dengan aturan "# /". Tapi itu tidak masalah, karena Angular sekarang sinkron dengan apa yang terjadi di URL 4) panggilan $ 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();
			}
		}	 
 });


1

Saya tidak 100% yakin apakah ini berfungsi sepanjang waktu, tetapi dalam aplikasi saya ini memberi saya perilaku yang diharapkan.

Katakanlah Anda berada di halaman TENTANG dan Anda memiliki rute berikut:

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

Sekarang, di HTML Anda

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

Kesimpulannya

Termasuk nama halaman sebelum jangkar melakukan trik untuk saya. Beri tahu saya tentang pemikiran Anda.

Kekurangannya

Ini akan merender ulang halaman dan kemudian gulir ke jangkar.

MEMPERBARUI

Cara yang lebih baik adalah menambahkan yang berikut ini:

<a href="#tab1" onclick="return false;">First Part</a>

1

Dapatkan fitur gulir Anda dengan mudah. Ini juga mendukung Penggulungan Animasi / Lancar sebagai fitur tambahan. Detail untuk pustaka Scroll Sudut :

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

Bower :bower install --save angular-scroll

npm :npm install --save angular-scroll

Versi kecil - hanya 9kb

Scrolling Halus (scrolling animasi) - ya

Gulir Spy - ya

Dokumentasi - luar biasa

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

Semoga ini membantu.


1

Berdasarkan @Stoyan saya datang dengan solusi berikut:

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();
        }
    }
});

0

Pada Rute perubahan itu akan gulir ke bagian atas halaman.

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

letakkan kode ini di pengontrol Anda.


0

Dalam pikiran saya @slugslog memilikinya, tetapi saya akan mengubah satu hal. Saya akan menggunakan ganti sehingga Anda tidak harus mengaturnya kembali.

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

Pencarian Dokumen untuk "Ganti metode"


0

Tidak ada solusi di atas yang berfungsi untuk saya, tetapi saya baru saja mencoba ini, dan itu berhasil,

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

Jadi saya menyadari bahwa saya perlu memberi tahu halaman untuk memulai dengan halaman indeks dan kemudian menggunakan jangkar tradisional.


0

Kadang-kadang dalam aplikasi hash navigasi angularjs tidak bekerja dan bootstrap jquery perpustakaan javascript memanfaatkan ekstensif jenis navigasi ini, untuk membuatnya berfungsi menambah target="_self"tag anchor. misalnya<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">



0

Saya menggunakan AngularJS 1.3.15 dan sepertinya saya tidak perlu melakukan sesuatu yang istimewa.

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

Jadi, berikut ini berfungsi untuk saya di html saya:

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

Saya tidak harus melakukan perubahan apa pun pada controller atau JavaScript saya sama sekali.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.