There is a button that leads to the portfolio page, after the click, I want to redirect the user to the element with a specific id.

Here is the button (on the main.html page)

<a ng-href="#/portfolio#brif"> <div class="ibtn" > <svg> <rect x="0" y="0" fill="none" width="166" height="45" /> </svg> Заполнить бриф </div> </a>

Here is the item to which I refer (page porfolio.html)

 <section class="wrapp_content brif_na dark_blue" id="brif"> <ng-include src="'template/form.html'"></ng-include> </section>

Here is an application on which you can see what I mean (i.e. when loading, if you click on "fill in the brief" - it will take "our services" to the top of the page, returning to the main page and repeating the action, refer to the ID, apparently ng-include does not have time to boot for the first time.

But if you try to insert such code into controller.js

 remindApp.run(function($rootScope, $location, $anchorScroll, $routeParams) { $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { $location.hash($routeParams.scrollTo); $anchorScroll(); }); });

And the link itself is replaced by:

 <a ng-href="#portfolio?scrollTo=brif" >

That occurs strange behavior, the transition is carried out and even strives to the right place, but does not reach the end - here are the screens:

AT FIRST TRANSIT

AT FIRST TRANSIT

SECOND TRANSITION

SECOND TRANSITION

P / S: Of course, you can not refer to ng-include and write something else, but I want to deal with the behavior, I do not understand why there is a difference between the first and second methods and how to say ng-href to work after ng-include. Thanks in advance for your patience

  • Add a working example to the plunkr in which your problem would be replicated - Grundy
  • @gundy, Unfortunately, I don’t know how to create 2 pages on plunkr. To post a problem, you need 2 pages - Andrey Fedorovich
  • there in the menu on the left is the new file item - Grundy
  • 2
    If I understand you are interested in scrolling to an anchor? Maybe help $ anchorScroll - Michael Radionov
  • one
    Then I propose to post the answer yourself. - Qwertiy ♦

3 answers 3

everything was solved much easier, you need to wrap it all up in a div, and assign a min-height to ccs to this div — crutches, but a really simple way

    To navigate through the anchor, you need to add an anchor to the address

     <a ng-href="#/portfolio#brif">

    Plunkr

    Well, as suggested by @MichaelRadionov, you can go manually using $ anchorScroll

    But since the automatic anchor transition is enabled by default, you can do without a direct call.

       <a ng-href="'#/portfolio/'+brif">
      • This approach will not work, since we need not just a transition to the portfolio address, but also a further transition along the brif anchor - and for this you need to indicate that this is an anchor - Grundy