在AngularJS 處理錨點雜湊連結
如果您在AngularJS 中遇到一個簡單點連結問題，有一個簡單點連結的解決方案： $ anchorScroll().
AngularJS 提供了$anchorScroll() 服務，它允許您輕鬆滾動到具有在$location.hash() 中找到的ID 的任何元素。使用方法如下：
<code class="javascript">app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});</code>在標記中，您可以使用ng-click 指令來觸發滾動操作：
<code class="html"><a ng-click="scrollTo('foo')">Foo</a>
<div id="foo">Here you are</div></code>與AngularJS 集成路由
與AngularJS 集成路由
<code class="javascript">app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
$location.hash($routeParams.scrollTo);
$anchorScroll();
});
});</code><code class="html"><a href="#/test?scrollTo=foo">Test/Foo</a></code>
<code class="javascript">app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
if($location.hash()) $anchorScroll();
});
});</code>。
<code class="html"><a href="#/test#foo">Test/Foo</a></code>
新增以下程式碼：
這是一個帶有路由的範例連結：對於更簡單的方法，您可以使用此程式碼：以及相應的連結：透過這些解決方案，您可以無縫連結到錨點並捲動到AngularJS 應用程式中的相應內容。以上是如何在 AngularJS 應用程式中實現平滑的錨點哈希連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
