1

I have been supplied a bunch of html that I need to integrate with data supplied from my web api. I'm using Angular and page navigation is being handled with the Angular-ui router.

My problem is that the code I have to work with contains lots of anchors like this

<heading class="pageheader">
    <a href="#step1" class="link-scroll">Scroll Down</a>
       ... bunch of stuff
 </heading>

 <div id="step1">
       ... more stuff
 </div>

my problem is that instead of triggering the javascript that scrolls the page down to the data entry stuff in the step1 div, a click on the link refreshes the page so I end up back at the home page view.

So I worked out that if do this

<heading class="pageheader">
    <a ui-sref="state" href="#step1" class="link-scroll">Scroll Down</a>
       ... bunch of stuff
 </heading>

I stay in my current view, but the javascript that should get triggered to scroll the page down to step1 never gets called.... any ideas for an easy way to do this?

I can work round it by changing the anchor to a div and handling the click in my angular controller, but there are lots of these in the html I have to work with.

LennieHarvey
  • 25
  • 3
  • Do you want to jump down to an anchor or do you want first the state to change and then additionally scroll down to an anchor? Maybe you find your answer [here](http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs). – Namoshek Nov 16 '15 at 14:50

1 Answers1

0

It appears that there is some support for anchorScrolling in ui-router.

According to the aforementioned link:

A small service that handles the scrolling behind the scenes for the autoscroll attribute directive. You can also use it if you'd like.

When called with a jqLite element, it scrolls the element into view (after a $timeout so the DOM has time to refresh). If you prefer to rely on anchorScroll to scroll the view to the anchor, this can be enabled by calling $uiViewScrollProvider.useAnchorScroll().

According to this link also, autoscroll is an option as well. (Exmples from docs).

<!-- If autoscroll unspecified, then scroll ui-view into view 
    (Note: this default behavior is under review and may be reversed) -->
<ui-view/>

<!-- If autoscroll present with no expression,
     then scroll ui-view into view -->
<ui-view autoscroll/>

<!-- If autoscroll present with valid expression,
     then scroll ui-view into view if expression evaluates to true -->
<ui-view autoscroll='true'/>
<ui-view autoscroll='false'/>
<ui-view autoscroll='scopeVariable'/>
Sean Larkin
  • 6,290
  • 1
  • 28
  • 43