更改路线不会滚动到新页面的顶部

2020/10/08 05:41 · javascript ·  · 0评论

至少对于我来说,我发现路线改变时有一些不希望有的行为。在教程http://angular.github.io/angular-phonecat/step-11/app/#/phones的步骤11中,
您可以看到电话列表。
如果滚动到底部并单击最新滚动条之一,则可以看到滚动条不在顶部,而是在中间。

我也在我的一个应用程序中找到了这个,我想知道如何才能滚动到顶部。我可以手动执行此操作,但是我认为应该有其他我不知道的优雅方法来执行此操作。

那么,当路线改变时,有没有一种优雅的方式可以滚动到顶部?

问题是您的ngView加载新视图时会保留滚动位置。您可以指示$anchorScroll“在更新视图后滚动视口”(文档有些含糊,但是在此处滚动意味着滚动到新视图的顶部)。

解决方案是将添加autoscroll="true"到您的ngView元素:

<div class="ng-view" autoscroll="true"></div>

只需将这段代码运行

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

这段代码对我来说很棒。.我希望它对您也很棒。.您要做的就是将$ anchorScroll注入到您的run块中,并将监听器函数应用于rootScope,就像我在下面的示例中所做的..

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

这是Angularjs模块的调用顺序:

  1. app.config()
  2. app.run()
  3. directive's compile functions (if they are found in the dom)
  4. app.controller()
  5. directive's link functions (again, if found)

RUN BLOCK 在创建注入器后执行,并用于启动应用程序。这意味着当您重定向到新的路由视图时,run块中的侦听器将调用

$ anchorScroll()

现在您可以看到滚动从新的路由视图开始到顶部:)

尝试的每个组合一两个小时后ui-view autoscroll=true$stateChangeStart$locationChangeStart$uiViewScrollProvider.useAnchorScroll()$provide('$uiViewScroll', ...),和许多人一样,预期我无法滚动到顶部上新页面的工作。

最终这对我有用。它捕获pushState和replaceState,并且仅在导航到新页面时更新滚动位置(后退/前进按钮保留其滚动位置):

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

这是我(貌似)健壮,完整和(相当)简洁的解决方案。它使用最小化兼容样式(以及对模块的angular.module(NAME)访问)。

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS我发现自动滚动的东西无论设置为true还是false都无效。

使用angularjs UI路由器,我正在做的是这样的:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

带有:

var scrollContent = function() {
    // Your favorite scroll method here
};

它永远不会在任何页面上失败,并且它不是全局的。

对于遇到标题中所述问题的人(像我一样),也正在使用AngularUI Router插件的人,仅供参考

正如在此SO问题中所要求和回答的那样,当您更改路线时,angular-ui路由器会跳至页面底部。
无法找出为什么页面底部加载?Angular UI-Router自动滚动问题

但是,正如答案所指出的,您可以通过autoscroll="false"在上说出来来关闭此行为ui-view

例如:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div> 

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

你可以使用这个JavaScript

$anchorScroll()

如果您使用ui-router,则可以使用(运行时)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});

我找到了这个解决方案。如果转到新视图,该函数将被执行。

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

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

将autoScroll设置为true并不是我的招数,所以我选择了另一个解决方案。我构建了一个服务,该服务在每次路线更改时都挂钩,并且使用内置的$ anchorScroll服务滚动到顶部。为我工作:-)。

服务:

 (function() {
    "use strict";

    angular
        .module("mymodule")
        .factory("pageSwitch", pageSwitch);

    pageSwitch.$inject = ["$rootScope", "$anchorScroll"];

    function pageSwitch($rootScope, $anchorScroll) {
        var registerListener = _.once(function() {
            $rootScope.$on("$locationChangeSuccess", scrollToTop);
        });

        return {
            registerListener: registerListener
        };

        function scrollToTop() {
            $anchorScroll();
        }
    }
}());

注册:

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
    pageSwitch.registerListener();
}]);

晚会晚了一点,但是我尝试了所有可能的方法,但是没有任何正确的方法。这是我的优雅解决方案:

我使用一个控制器来管理ui-router的所有页面。它允许我将未经身份验证或验证的用户重定向到适当的位置。大多数人将中间件放入其应用程序的配置中,但是我需要一些http请求,因此全局控制器对我来说更好。

我的index.html看起来像:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

我的initCtrl.js看起来像:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

我尝试了所有可能的方法,这种方法效果最好。

简单解决方案中,添加scrollPositionRestoration启用的主路由模块。

像这样:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

上面的所有答案都破坏了预期的浏览器行为。大多数人想要的是在“新”页面中将滚动到顶部的内容,但是如果您通过“后退”(或“前进”)按钮到达那里,则会返回到上一个位置。

如果您采用HTML5模式,那么这很容易(尽管我敢肯定有些聪明的人可以弄清楚如何使它更优雅!):

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

它的工作方式是路由器假定它将滚动到顶部,但会延迟一点时间,使浏览器有机会完成。如果浏览器随后通知我们更改是由于后退/前进导航引起的,它将取消超时,并且永远不会发生滚动。

我使用原始document命令进行滚动,因为我想移至窗口的整个顶部。如果只想ui-view滚动,则使用上述技术设置autoscroll="my_var"控制位置my_var但是我认为,如果您以“新”身份进入页面,大多数人都希望滚动整个页面。

上述用途的用户界面的路由器,但你可以通过交换而不是使用NG-路线$routeChangeSuccess$stateChangeSuccess

提供的答案均未解决我的问题。我在视图之间使用动画,并且滚动总是在动画之后进行。我找到的解决方案是使滚动到顶部发生在动画之前是以下指令:

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

我将其插入到我的视图中,如下所示:

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

试试这个http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

它确实滚动到列表的顶部scrollTop()

我终于得到了我所需要的。

我需要滚动到顶部,但要进行一些过渡而不是

您可以在逐个路由级别进行控制。

我将@wkonkel的上述解决方案组合在一起,并
noScroll: true在一些路由声明中添加了一个简单的参数。然后我在过渡中抓住了这一点。

总而言之:在新转换时,它浮在页面顶部,在Forward/Back转换时,它不浮在页面顶部,并且允许您在必要时覆盖此行为。

代码:(以前的解决方案加上一个额外的noScroll选项)

  // hack to scroll to top when navigating to new URLS but not back/forward
  let wrap = function(method) {
    let orig = $window.window.history[method];
    $window.window.history[method] = function() {
      let retval = orig.apply(this, Array.prototype.slice.call(arguments));
      if($state.current && $state.current.noScroll) {
        return retval;
      }
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');

把它放在你的app.run块并注入$state...myApp.run(function($state){...})

然后,如果您不想滚动到页面顶部,请创建如下路线:

.state('someState', {
  parent: 'someParent',
  url: 'someUrl',
  noScroll : true // Notice this parameter here!
})

这对我有用,包括自动滚动

<div class="ngView" autoscroll="true" >

本文地址:http://javascript.askforanswer.com/genggailuxianbuhuigundongdaoxinyemiandedingbu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!