Why ng-view not scrolling to top of the page when changing routes?

Question

I have tried to use this solution Changing route doesn't scroll to top in the new page . I am still having trouble when I click on a link on my website to change routes, it isn't scrolling to the top. It will keep the same scroll height from the previous page. I tried using $anchorscroll and still cant resolve.

This is my main index - where my ng-view is

<div layout="column">
        <div class="topNav" layout="row">
            <a href="/#/home" flex="70">
            </a>
            <a class="home" href="/#/home"flex="10">
                <p> HOME </p>
            </a> 
            <a  href="/#/about" flex="10">
                <p> ABOUT </p>
            </a>
        </div>
        <div layout="row">
            <div class="sideNav">
                <div class="icons">
                       <p>Page Garner</p>
                </div>
            </div>
            <ng-view autoscroll="true"></ng-view>
        </div>

This is my home template - when I click on one of these a tags to change routes it keeps the same scroll height.

 <div layout="row">
        <div class="project" flex="50">
            <a href="/#/lost">
                <div class="img img1">
                    <p class="hoverText"><span>Lost in the U.S.A!</span>
                        <br> HTML/CSS | Bootstrap | Javascript | AngularJS | Google Maps API | Firebase </p>
                </div>
            </a>
        </div>
        <div class="project" flex="50">
            <a ng-href="/#/checkItOut">
                <div class="img img2">
                    <p class="hoverText"><span>CHECK IT</span>
                        <br> HTML/CSS | Javascript | AngularJS | NodeJS | Express | MongoDB </p>
                </div>
            </a>
        </div>
    </div>
    <div layout="row">
        <div class="project" flex="50">
            <a href="/#/lightRail">
                <div class="img img3">
                    <p class="hoverText"><span>Light Rail Connect</span>
                        <br> HTML/CSS | Javascript | AngularJS | NodeJS | Express | Google Maps API | MongoDB</p>
                </div>
            </a>
        </div>
        <div class="project" flex="50">
            <a ng-click="goToAbout()">
                <div class="img img4">
                    <p class="hoverText"><span>Your <br> Next <br> Project... <br></span> </p>
                </div>
            </a>
        </div>
    </div>

This is my app.js file

var app = angular.module('myWebsite', ['ngRoute', 'ngMaterial']);

app.config(function($routeProvider) {

    $routeProvider

      .when('/home', {
        templateUrl: 'Views/home.html',
        controller: 'MainCtrl'
      })

    .when('/about', {
      templateUrl: 'Views/about.html',
      controller: 'MainCtrl'
    })

     .when('/lost', {
      templateUrl: 'Views/lost.html',
      controller: 'MainCtrl'
    })

    .when('/checkItOut', {
      templateUrl: 'Views/checkItOut.html',
      controller: 'MainCtrl'
    })

    .when('/lightRail', {
      templateUrl: 'Views/lightRail.html',
      controller: 'MainCtrl'
    })

    .otherwise({
        redirectTo: '/home'
      })

});

Answer 1

The following question on Stack Overflow has the answer you need.

AngularJS + Safari: Force page to scroll to top when pages switch