个人中心
gpt4 book ai didi

javascript - AngularJS 使用routeParams 滚动到ID

转载 作者：行者123 更新时间：2023-11-28 20:10:34 25 4
gpt4 key购买 nike

我正在制作一个具有子页面的单页应用程序。

这个想法是，我有网址，例如主页、关于和联系方式。每个页面都有多个 block 。

页面加载时， block 会设置最小高度。最小高度是窗口高度。这是动态的，因此当您调整大小时，最小高度将被重置。

目前，路由是#/home/:blockId

当有人访问http://www.test.com/#/home/page-17时，应用程序应向下滚动到该 block 。

我当前的代码可以工作，但返回的顶部位置是设置最小高度之前的上一个位置。

如果我没有说清楚，请随时询问更多细节。谢谢

参见 jsFiddle: http://jsfiddle.net/7nc9q/5/

Javascript:

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

app.controller( 'appController', function( $scope ) {
  //Main login here
});
app.controller( 'routeController', function( $scope, $routeParams ) {
  /* 
    Scroll to element ID
  */
  $scope.scrollTo = function(selector){
    if(jQuery('#' + selector).length == 1){
      console.log(jQuery('#' + selector).position().top);
      jQuery('html, body').animate({
        scrollTop:  jQuery('#' + selector).position().top
      });
    };
  }
  if(typeof $routeParams.page !== 'undefined' && $routeParams.page.length > 0){
    $scope.scrollTo($routeParams.page);
  }
});
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home/:page', {
        templateUrl: 'templates/home.html',
        controller: 'routeController'
      }).
      otherwise({
        redirectTo: '/home/'
      });
}]);

app.directive('resize', function ($window) {
  return function (scope, element) {
      var w = angular.element($window);

      scope.getWindowDimensions = function () {
          return { height: w.height() };
      };

      scope.$watch(scope.getWindowDimensions, function (dimensions) {
          scope.windowHeight = dimensions.height;

          scope.style = function () {
              return { 
                  'min-height': scope.windowHeight + 'px'
              };
          };

      }, true);

      w.bind('resize', function () {
          scope.$apply();
      });
  }
});

index.html:

<!doctype html>
<html ng-app="siteApp" ng-controller="appController">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="assets/js/app.js"></script>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="view" ng-view></div>
    </div>
  </body>
</html>

templates/home.html

<div class="page" id="page-17" >
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-18">
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-19">
    <div class="page-inner" ng-style="style()" resize></div>
</div>
<div class="page" id="page-20">
    <div class="page-inner" ng-style="style()" resize></div>
</div>

页面布局示例:

enter image description here

最佳答案

有一个内置的 Angular 属性$anchorScroll，请确保您将其包含在 Controller 中

  $scope.anchorScroll = function()
            {
                $location.hash('compose-message');

                $anchorScroll();
            }

有关更多信息，请查看文档:https://docs.angularjs.org/api/ng/service/ $anchorScroll

唯一的问题是:它先更新 url，然后正常执行所需的操作，使用以下代码可以避免它:

  $scope.anchorScroll = function()
                {
    var old = $location.hash();
                    $location.hash('compose-message');
                    $anchorScroll();
                    $location.hash(old);
}

关于javascript - AngularJS 使用routeParams 滚动到ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19983935/

25 4 0
文章推荐： reactjs - .net 核心 2.1 与 react 测试
文章推荐： python - 使用名为 guppy ( heapy ) 的 Python 工具时 C 代码中的段错误
文章推荐： reactjs - 使用大理石图运行测试时不会执行 ajax 请求
文章推荐： python - 显示价格
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com