angularjs錨點的使用

有不少人在使用ng-view時都用到了#號作route，因此若是在頁面上須要用到錨點的時候就會比較頭疼了。這個時候可使用ng的anchorScroll，也可使用jsGen中封裝的anchorScroll。推薦使用jsGen中的anchorScroll。

services.js

.factory('anchorScroll', function () { function toView(element, top, height) { var winHeight = $(window).height(); element = $(element); height = height > 0 ? height : winHeight / 10; $('html, body').animate({ scrollTop: top ? (element.offset().top - height) : (element.offset().top + element.outerHeight() + height - winHeight) }, { duration: 200, easing: 'linear', complete: function () { if (!inView(element)) { element[0].scrollIntoView( !! top); } } }); } function inView(element) { element = $(element); var win = $(window), winHeight = win.height(), eleTop = element.offset().top, eleHeight = element.outerHeight(), viewTop = win.scrollTop(), viewBottom = viewTop + winHeight; function isInView(middle) { return middle > viewTop && middle < viewBottom; } if (isInView(eleTop + (eleHeight > winHeight ? winHeight : eleHeight) / 2)) { return true; } else if (eleHeight > winHeight) { return isInView(eleTop + eleHeight - winHeight / 2); } else { return false; } } return { toView: toView, inView: inView }; })

使用方式 直接使用：app.anchorScroll.toView('#test', true);

 controller： $scope.demo = function(){ app.anchorScroll.toView('#test', true); }; view: <a href="" ng-click="demo();">test</a> <div id="test"></div>