AngularJS $anchorScroll adds ##-anchorname to page URL. How can I avoid this?

Question

I am using AngularJS's locationhash() + $anchorScroll to move a selected page element to the top of the window once its contents have loaded in via Ajax.

JS: In the controller:

     $scope.scrollTo = function (location) {
            //Scroll to category head
            $scope.categoryHead = "grouptitle-" + location;
            $location.hash($scope.categoryHead);
            $anchorScroll($scope.categoryHead);
     };

In the directive:

 .directive('onFinishRender', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                var scroll;
                if (scope.$last === true) {
                    $timeout(function () {
                        //Scroll category to top of page after list has completed render
                        scroll = scope.scrollTo(scope.category);
                    });
                }
            }
        };

This gives me a display URL of mysite.com/##grouptitle-2 or similar, which looks a bit arcane. Is there any way to configure this anchor so that it either displays with only one hash, or doesn't modify the address bar URL at all?

Answer 1

on your $anchorScroll remove the parameter. The anchorScroll will automatically grab the hash from $location.hash(<hash>) .

so your function should look something like this:

$scope.categoryHead = "grouptitle-" + location;
$location.hash($scope.categoryHead);
$anchorScroll();

If the DOM is updated dynamically then wrap the $location.hash and $anchorScroll inside $timeout function.

Answer 2

Do following steps: after this $location.hash($scope.categoryHead); add

 $anchorScroll(); $location.hash(''); $location.replace(); 

$location.replace() function will remove '#' from url.

Answer 3

Do following steps: after this $location.hash($scope.categoryHead); add

$anchorScroll();
$location.hash('');
$location.replace();

$location.replace() function will remove '#' from url.