Question

我试过使用这个解决方案 Changing route doesn't scroll to top in the new page。当我点击我网站上的链接更改路线时，我仍然遇到问题，它不会滚动到顶部。它将保持与上一页相同的滚动高度。我尝试使用$ anchorscroll但仍然无法解决。

这是我的主要索引 - 我的ng-view是

<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>

这是我的主页模板 - 当我点击其中一个标签来更改路线时，它会保持相同的滚动高度。

 <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>

这是我的app.js文件

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

以下有关Stack Overflow的问题可以为您提供答案。

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

为什么ng-view在更改路线时不会滚动到页面顶部？

1 个答案: