我正在尝试快速导航以正常工作。它漂浮在一边。当他们点击一个链接时，它会将他们带到页面上的那个 ID。我正在关注Treehouse 的本指南。这就是我的滚动：
$("#quickNav a").click(function(){
var quickNavId = $(this).attr("href");
$("html, body").animate({scrollTop: $(location).offset().top}, "slow");
return false;
});
我最初将它放在</body>. 但我似乎遇到了一种竞争条件，即在 quickNav 编译之前触发（它有一个ng-hide放置，不确定是否是导致它 - 但它在 DOM 内）。
如果我在控制台中运行该代码块，则滚动按预期工作。
我认为将它移动到控制器中会更有效 - 或者更有可能在指令中。但我没有运气做到这一点。如何让这段代码与 AngularJS 一起工作？
这是一个简单的指令，它会在点击时滚动到一个元素：
myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm) {
$elm.on('click', function() {
$("body").animate({scrollTop: $elm.offset().top}, "slow");
});
}
}
});
演示：http ://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview
如需帮助创建指令，请查看http://egghead.io上的视频，从 #10“第一个指令”开始。
编辑：要使其滚动到由 href 指定的特定元素，只需选中attrs.href.
myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
var idToScroll = attrs.href;
$elm.on('click', function() {
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = $elm;
}
$("body").animate({scrollTop: $target.offset().top}, "slow");
});
}
}
});
然后你可以像这样使用它：<div scroll-on-click></div>滚动到点击的元素。或者<a scroll-on-click href="#element-id"></div>滚动到带有 id 的元素。
如果您想使用它，这是一个更好的指令：
您可以滚动到页面中的任何元素：
.directive('scrollToItem', function() {
return {
restrict: 'A',
scope: {
scrollTo: "@"
},
link: function(scope, $elm,attr) {
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
}
}})
用法（例如点击 div 'back-to-top' 将滚动到 id scroll-top）：
<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll">
html,body 元素的 chrome、firefox、safari 和 IE 也支持它。
为了对滚动容器内的特定元素进行动画处理（固定 DIV）
/*
@param Container(DIV) that needs to be scrolled, ID or Div of the anchor element that should be scrolled to
Scrolls to a specific element in the div container
*/
this.scrollTo = function(container, anchor) {
var element = angular.element(anchor);
angular.element(container).animate({scrollTop: element.offset().top}, "slow");
}
使用$anchorScroll从Ben Lesh 现在存档的博客文章中获取的角度解决方案，在他提供的这个 SO 答案中也详细复制了该文章（包括重写如何在路由中执行此操作）：
app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
var i = 1;
$scope.items = [{ id: 1, name: 'Item 1' }];
$scope.addItem = function (){
i++;
//add the item.
$scope.items.push({ id: i, name: 'Item ' + i});
//now scroll to it.
$location.hash('item' + i);
$anchorScroll();
};
});
这是提供此解决方案的博客中的 plunker：http ://plnkr.co/edit/xi2r8wP6ZhQpmJrBj1jM?p=preview
需要注意的是，该 plunker 的模板包含此内容，它设置了id您$anchorScroll用于滚动到的内容：
<li ng-repeat="item in items"
id="item{{item.id}}"
>{{item.name}</li>
如果您喜欢纯 JavaScript 解决方案，这里有一个：
使用父容器 id 和目标滚动 id 在代码中调用 runScroll：
function runScroll(parentDivId,targetID) {
var longdiv;
longdiv = document.querySelector("#" + parentDivId);
var div3pos = document.getElementById(targetID).offsetTop;
scrollTo(longdiv, div3pos, 600);
}
function scrollTo(element, to, duration) {
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop == to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
感谢安迪的例子，这很有帮助。由于我正在开发单页滚动并且不希望 Angular 在使用 hashbang URL 时刷新，因此我最终实施了一个稍微不同的策略。我还想保留浏览器的后退/前进操作。
我没有使用指令和哈希，而是在 $location.search 上使用 $scope.$watch，并从那里获取目标。这给出了一个漂亮干净的锚标签
<a ng-href="#/?scroll=myElement">My element</a>
我将监视代码链接到 app.js 中的我的模块声明，如下所示：
.run(function($location, $rootScope) {
$rootScope.$watch(function() { return $location.search() }, function(search) {
var scrollPos = 0;
if (search.hasOwnProperty('scroll')) {
var $target = $('#' + search.scroll);
scrollPos = $target.offset().top;
}
$("body,html").animate({scrollTop: scrollPos}, "slow");
});
})
上面代码的警告是，如果您直接从不同的路由通过 URL 访问，则 DOM 可能无法及时加载 jQuery 的 $target.offset() 调用。解决方案是将此代码嵌套在 $viewContentLoaded 观察程序中。最终代码如下所示：
.run(function($location, $rootScope) {
$rootScope.$on('$viewContentLoaded', function() {
$rootScope.$watch(function() { return $location.search() }, function(search) {
var scrollPos = 0
if (search.hasOwnProperty('scroll')) {
var $target = $('#' + search.scroll);
var scrollPos = $target.offset().top;
}
$("body,html").animate({scrollTop: scrollPos}, "slow");
});
});
})
用 Chrome 和 FF 测试
我使用了 andrew joslin 的答案，效果很好，但触发了角度路线变化，这为我创造了一个看起来很跳跃的滚动。如果您想避免触发路线更改，
myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
var idToScroll = attrs.href;
$elm.on('click', function(event) {
event.preventDefault();
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = $elm;
}
$("body").animate({scrollTop: $target.offset().top}, "slow");
return false;
});
}
}
});
另一个建议。一个带有选择器的指令。
HTML：
<button type="button" scroll-to="#catalogSection">Scroll To</button>
角度：
app.directive('scrollTo', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function () {
var target = $(attrs.scrollTo);
if (target.length > 0) {
$('html, body').animate({
scrollTop: target.offset().top
});
}
});
}
}
});
还要注意$anchorScroll
angular-scroll怎么样，它得到了积极维护，并且不依赖于 jQuery..
非常明确的答案，仅使用 ANGULARJS，没有任何 JQUERY 依赖
在您的 html 底部某处<back-top>some text</back-top>
在您的 html 顶部某处<div id="top"></div>
在你的 js 中：
/**
* @ngdoc directive
* @name APP.directive:backTop
<pre>
<back-top></back-top>
</pre>
*/
angular
.module('APP')
.directive('backTop', ['$location', '$anchorScroll' ,function($location, $anchorScroll) {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<span class=\'btn btn-mute pull-right\'><i class=\'glyphicon glyphicon-chevron-up\'></i><ng-transclude></ng-transclude></span>',
scope: {
},
link: function(scope, element) {
element.on('click', function(event) {
$anchorScroll(['top']);
});
}
};
}]);
使用元素的 ID 滚动到目标 div
指令（角度 1）
angular.module("App") // Module Name
.directive('scrollOnClick', function () {
return {
restrict: 'A',
scope: {
scrollTo: "@"
},
link: function (scope, $elm, attrs) {
//var idToScroll = attrs.href;
$elm.on('click', function () {
$('html,body').animate({ scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
}
}
});
HTML 代码
<!-- Click to scroll -->
<a scroll-on-click scroll-to="#scheduleDiv">Click here to Scroll to Div With Id ""</a>
<!-- scrollable / target div -->
<div id="scheduleDiv">Test scrolling ... You are able to view me on click of above anchor tag.</div>