angularjs $anchorScroll sometimes refresh all page

Question

I have an app with angularjs routing, but on some view i want to scroll to some specific div and i use anchorScroll but sometimes (not all times) it refresh all page even i stop event propagation. Did anyone had this issue?

 $scope.redirectTodiv = function(divname,event) {
    event.stopPropagation();  
    event.preventDefault();

    $location.hash(divname);
    $anchorScroll();

 };

I cant reproduce the error on plunker, but i create one with the same code... http://plnkr.co/edit/QW5YExTbwAtvrDaFVjP7?p=preview — John, Sep 19 '14 at 09:57

score 21 · Accepted Answer · answered Sep 19 '14 at 09:39

21

Try like this

$scope.redirectTodiv = function(divname,event) {
   var id = $location.hash();
    $location.hash(divname);
    $anchorScroll();
    $location.hash(id);

 };

answered Sep 19 '14 at 09:39

sol4me

15,233
5
34
34

Thanks! I was experiencing the same issue, and this solved it perfectly. – Daniel Congrove Feb 07 '18 at 20:04
This didn't work for me. If the server respond with an error, I want to scroll to the div where the error is displayed. On the first click on "save" button, it doesn't reload the page, but does not scroll, on the second click on save, it does scroll to where it should. – Thomas Sep 14 '20 at 23:46

score 2 · Answer 2 · answered May 23 '19 at 13:57

2

The way to ensure navigation with one click is to combine $location.hash() $anchorScroll and setting routeProvider reloadOnSearch property to false i.e. In your controller code:

$location.hash("editor");
$anchorScroll();

In your route provider:

$routeProvider.when("/masters/voucher", {
    templateUrl: "views/card/voucher.html",
    reloadOnSearch: false
})

answered May 23 '19 at 13:57

David Kabii

642
6
17

This worked for me. If the server responds with an error, I want to scroll to the div where the error is displayed. With this fix (reloadOnSearch:false), it worked perfectly. Many Thanks :) – Thomas Sep 14 '20 at 23:47

score 0 · Answer 3 · answered Sep 15 '20 at 00:35

I've two use cases on the same page :

When clicking save, if the response is an error, scroll to the errorDiv that displays the error to the user. David Kabii's answer did work for me.
However, on the load of the page, in the controller, I want to scroll to a specific area of the page where the user's input is expected. This wouldn't work. I had to use window.setTimeout to workaround this. (there's probably a better way)

      window.setTimeout(function(){
        $location.hash("anchorForm");
        $anchorScroll();
      }, 300);

angularjs $anchorScroll sometimes refresh all page

3 Answers3

Linked