ScrollTo fungsi dalam AngularJS

I'm mencoba untuk mendapatkan nav cepat untuk bekerja dengan benar. It's mengambang di samping. Ketika mereka mengklik sebuah link, yang dibutuhkan mereka untuk bahwa ID pada halaman. I'm berikut ini panduan dari Treehouse. Ini adalah apa yang saya miliki untuk scrolling:

$("#quickNav a").click(function(){
    var quickNavId = $(this).attr("href");
    $("html, body").animate({scrollTop: $(location).offset().top}, "slow");
    return false;
});

Awalnya saya ditempatkan sebelum </body>. Tapi saya tampaknya berjalan dalam kondisi balapan mana yang menembak sebelum quickNav disusun (memiliki ng-menyembunyikan ditempatkan di atasnya, tidak yakin jika itu's yang menyebabkan hal itu - tetapi dalam DOM).

Jika saya menjalankan blok kode dalam console, kemudian bergulir bekerja seperti yang diharapkan.

Saya pikir itu'a akan lebih efektif untuk pindah ke controller - atau lebih mungkin hanya direktif. Tapi aku'm tidak memiliki keberuntungan untuk mencapai itu. Bagaimana saya bisa mendapatkan ini blok kode untuk bekerja dengan AngularJS?

EnigmaRM
Pertanyaan edit 25 Juni 2013 в 4:25
Pemrograman
javascript jquery anchor scroll angularjs
24 Juni 2013 в 7:58
35 tayangan
Larutan

Berikut ini adalah sederhana direktif yang akan gulir ke elemen di klik:

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm) {
      $elm.on('click', function() {
        $("body").animate({scrollTop: $elm.offset().top}, "slow");
      });
    }
  }
});

Demo: http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview

Untuk membantu menciptakan arahan, check out video di http://egghead.io mulai di #10 "pertama direktif".

edit: membuat scroll untuk elemen tertentu yang ditentukan oleh href, hanya memeriksa attrs.href.

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
      var idToScroll = attrs.href;
      $elm.on('click', function() {
        var $target;
        if (idToScroll) {
          $target = $(idToScroll);
        } else {
          $target = $elm;
        }
        $("body").animate({scrollTop: $target.offset().top}, "slow");
      });
    }
  }
});

Maka anda bisa gunakan seperti ini: <div scroll-di-klik></div> untuk menggulir ke elemen diklik. Atau <a scroll-di-klik href="#elemen-id"></div> untuk gulir ke elemen dengan id.

Andrew Joslin
Jawaban edit 25 Juni 2013 в 5:46
Komentar (11)

Ini adalah baik direktif dalam kasus anda ingin menggunakannya:

anda dapat menggulir untuk setiap elemen dalam halaman:

.directive('scrollToItem', function() {                                                      
    return {                                                                                 
        restrict: 'A',                                                                       
        scope: {                                                                             
            scrollTo: "@"                                                                    
        },                                                                                   
        link: function(scope, $elm,attr) {                                                   

            $elm.on('click', function() {                                                    
                $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
            });                                                                              
        }                                                                                    
    }})

Penggunaan (misalnya klik pada div 'kembali-ke-atas' akan gulir ke id-scroll atas):

<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll">

It's juga didukung oleh chrome,firefox,safari dan IE penyebab html,elemen body .

Komentar (1)

Dalam rangka untuk menghidupkan ke elemen tertentu di dalam sebuah gulungan wadah (tetap DIV)

/*
    @param Container(DIV) that needs to be scrolled, ID or Div of the anchor element that should be scrolled to
    Scrolls to a specific element in the div container
*/
this.scrollTo = function(container, anchor) {
    var element = angular.element(anchor);
    angular.element(container).animate({scrollTop: element.offset().top}, "slow");
}
Komentar (0)

Sudut solusi menggunakan $anchorScroll http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html:

app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
  var i = 1;

  $scope.items = [{ id: 1, name: 'Item 1' }];

  $scope.addItem = function (){
    i++;
    //add the item.
    $scope.items.push({ id: i, name: 'Item ' + i});
    //now scroll to it.
    $location.hash('item' + i);
    $anchorScroll();
  };
});

Dan di sini adalah memetik: http://plnkr.co/edit/xi2r8wP6ZhQpmJrBj1jM?p=preview

Dan jika anda peduli untuk pure javascript solusi, berikut adalah salah satu:

Memohon runScroll dalam kode anda dengan orang tua container id dan target gulir id:

function runScroll(parentDivId,targetID) {
    var longdiv;
    longdiv = document.querySelector("#" + parentDivId);
    var div3pos = document.getElementById(targetID).offsetTop;
    scrollTo(longdiv, div3pos, 600);
}

function scrollTo(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function () {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop == to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

Referensi: https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation

Community
Jawaban edit 23 Mei 2017 в 11:54
Komentar (2)

Aku digunakan andrew joslin's jawaban, yang karya-karya besar, tetapi dipicu sudut perubahan rute, yang dibuat gelisah mencari gulir untuk saya. Jika anda ingin menghindari memicu perubahan rute, 

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
      var idToScroll = attrs.href;
      $elm.on('click', function(event) {
        event.preventDefault();
        var $target;
        if (idToScroll) {
          $target = $(idToScroll);
        } else {
          $target = $elm;
        }
        $("body").animate({scrollTop: $target.offset().top}, "slow");
        return false;
      });
    }
  }
});
Komentar (0)

Terima kasih Andy misalnya, ini sangat membantu. Akhirnya saya menerapkan strategi yang sedikit berbeda sejak saya mengembangkan sebuah single-scroll halaman dan tidak ingin Sudut untuk menyegarkan ketika menggunakan hashbang URL. Saya juga ingin melestarikan kembali/maju tindakan dari browser.

Alih-alih menggunakan direktif dan hash, saya menggunakan $scope.$menonton di $lokasi.pencarian, dan memperoleh target dari sana. Ini memberikan yang bagus, bersih anchor tag

<a ng-href="#/?gulir=myElement">Saya elemen</a>

Aku dirantai jam kode modul saya deklarasi di app.js seperti:

.run(function($location, $rootScope) {
   $rootScope.$watch(function() { return $location.search() }, function(search) { 
     var scrollPos = 0;
     if (search.hasOwnProperty('scroll')) {
       var $target = $('#' + search.scroll);
       scrollPos = $target.offset().top;
     }   
     $("body,html").animate({scrollTop: scrollPos}, "slow");
   });
})

Peringatan dengan kode di atas adalah bahwa jika anda mengakses dengan URL langsung dari rute yang berbeda, DOM tidak dapat dimuat dalam waktu untuk jQuery's $target.offset() call. Solusinya adalah dengan sarang kode ini hanya $viewContentLoaded watcher. Kode akhir terlihat seperti ini:

.run(function($location, $rootScope) {
  $rootScope.$on('$viewContentLoaded', function() {
     $rootScope.$watch(function() { return $location.search() }, function(search) {
       var scrollPos = 0 
       if (search.hasOwnProperty('scroll')) {
         var $target = $('#' + search.scroll);
         var scrollPos = $target.offset().top;
       }
       $("body,html").animate({scrollTop: scrollPos}, "slow");                                                                                                                                                                    
     });  
   });    
 })

Diuji dengan Chrome dan FF

Komentar (0)

Apa tentang sudut-scroll, it's aktif dipelihara dan tidak ada ketergantungan dengan jQuery..

Komentar (0)

Saran lain. Salah satu direktif dengan pemilih.

HTML:

Scroll To

Sudut:

app.directive('scrollTo', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {

                var target = $(attrs.scrollTo);
                if (target.length > 0) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    });
                }
            });
        }
    }
});

Perhatikan juga $anchorScroll

Komentar (0)

jawaban yang sangat jelas, hanya menggunakan ANGULARJS, tidak ada JQUERY tergantung

dalam html anda di suatu tempat di bawah <kembali-top>beberapa teks</kembali-top>

dalam html anda di suatu tempat di atas <div id="atas"></div>

di js:

/**
 * @ngdoc directive
 * @name APP.directive:backTop
 <pre>

 </pre>
 */

angular
.module('APP')
.directive('backTop', ['$location', '$anchorScroll' ,function($location, $anchorScroll) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<span class=\'btn btn-mute pull-right\'></span>',
    scope: {
    },
    link: function(scope, element) {
      element.on('click', function(event) {
        $anchorScroll(['top']);
      });
    }
  };
}]);
Komentar (1)