ScrollTo function in AngularJS

Question

I m trying to get a quick nav to work correctly  It s floating on the side  When they click on  a link  it takes them to that ID on the page  I m following this guide from Treehouse  This is what I have for the scrolling       quickNav a   click function        var quickNavId     this  attr  href           html  body   animate  scrollTop    location  offset   top    slow        return false        I initially placed it before the  lt  body gt   But I seem to be running into a race condition where that was firing before the quickNav compiled  it has a ng-hide placed on it  not sure if that s causing it - but it is within the DOM    If I run that block of code in the console  then the scrolling works as expected    I figured it d be more effective to move this into the controller - or more likely within a directive  But I m not having luck accomplishing that  How can I get this block of code to work with AngularJS

User · Answer

In order to animate to a specific element inside a scroll container  fixed 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

User · Answer

An angular solution using  anchorScroll taken from a now archived blog post by Ben Lesh  which is also reproduced in some detail at this SO answer he contributed  including a rewrite of how to do this within a routing   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              And here is the plunker  from the blog that provided this solution  http   plnkr co edit xi2r8wP6ZhQpmJrBj1jM p preview Important to note that the template at that plunker includes this  which sets up the id that you re using  anchorScroll to scroll to   lt li ng-repeat  quot item in items quot       id  quot item  item id   quot   gt   item name  lt  li gt    And if you care for a pure javascript solution  here is one  Invoke runScroll in your code with parent container id and target scroll id  function runScroll parentDivId targetID        var longdiv      longdiv   document querySelector  quot   quot    parentDivId       var div3pos   document getElementById targetID  offsetTop      scrollTo longdiv  div3pos  600       function scrollTo element  to  duration        if  duration  lt  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      Reference  Cross browser JavaScript  not jQuery     scroll to top animation

User · Answer

What about angular-scroll  it s actively maintained and there is no dependency to jQuery

User · Answer

I used andrew joslin s answer  which works great but triggered an angular route change  which created a jumpy looking scroll for me  If you want to avoid triggering a route change    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

User · Answer

Thanks Andy for the example  this was very helpful  I ended implementing a slightly different strategy since I am developing a single-page scroll and did not want Angular to refresh when using the hashbang URL  I also want to preserve the back forward action of the browser    Instead of using the directive and the hash  I am using a  scope  watch on the  location search  and obtaining the target from there  This gives a nice clean anchor tag   lt a ng-href     scroll myElement  gt My element lt  a gt   I chained the watch code to the my module declaration in app js like so    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                The caveat with the code above is that if you access by URL directly from a different route  the DOM may not be loaded in time for jQuery s  target offset   call  The solution is to nest this code within a  viewContentLoaded watcher  The final code looks something like this    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                                                                                                                                                                                                    Tested with Chrome and FF

User · Answer

Here is a simple directive that will scroll to an element on click   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  For help creating directives  check out the videos at http   egghead io  starting at  10  first directive    edit  To make it scroll to a specific element specified by a href  just check 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                              Then you could use it like this   lt div scroll-on-click gt  lt  div gt  to scroll to the element clicked   Or  lt a scroll-on-click href   element-id  gt  lt  div gt  to scroll to element with the id

User · Answer

This is a better directive in case you would like to use it   you can scroll to any element in the page    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                                                                                                                                                                                                               Usage  for example click on div  back-to-top  will scroll to id scroll-top     lt a id  top-scroll  name  top  gt  lt  a gt   lt div class  back-to-top  scroll-to-item scroll-to   top-scroll  gt     It s also supported by chrome firefox safari and IE cause of the html body element

User · Answer

Another suggestion  One directive with selector   HTML    lt button type  button  scroll-to   catalogSection  gt Scroll To lt  button gt    Angular   app directive  scrollTo   function          return           restrict   A           link  function  scope  element  attrs                element on  click   function                       var target     attrs scrollTo                   if  target length  gt  0                           html  body   animate                           scrollTop  target offset   top                                                                                 Also notice  anchorScroll

User · Answer

very clear answer  using just ANGULARJS  no any JQUERY depends  in your html somewhere on the bottom  lt back-top gt some text lt  back-top gt   in your html somewhere on the top  lt div id  top  gt  lt  div gt    in your js           ngdoc directive     name APP directive backTop   lt pre gt   lt back-top gt  lt  back-top gt    lt  pre gt        angular  module  APP    directive  backTop      location     anchorScroll   function  location   anchorScroll      return       restrict   E       replace  true      transclude  true      template    lt span class   btn btn-mute pull-right   gt  lt i class   glyphicon glyphicon-chevron-up   gt  lt  i gt  lt ng-transclude gt  lt  ng-transclude gt  lt  span gt        scope               link  function scope  element          element on  click   function event             anchorScroll   top

[javascript] ScrollTo function in AngularJS

Examples related to javascript

Examples related to jquery

Examples related to angularjs

Examples related to scroll

Examples related to anchor