我正在制作一个具有子页面的单页应用程序。
这个想法是，我有网址，例如主页、关于和联系方式。 每个页面都有多个 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>
页面布局示例:
最佳答案
有一个内置的 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/