本文实例讲述了AngularJS实现的锚点楼层跳转功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html ng-app=' myApp ' head meta charset=' UTF-8 '标题锚点/标题样式# Wei div { width :100%；高度：720 px背景：红色；color: # fff文本对齐：居中；线高： 720像素；margin :20 px font-size : 80px；} #wei ul{ position:固定；top :300 pxright :60 px } # Wei ul Li { width :20 px显示：块；高度：20 px背景：灰色；color: # fff文本对齐：居中；线高： 20px边界半径： 50%;边距-底部： 20px光标：指针；}/style/head body ng-controller=' show ' div id=' Wei ' div ng-repeat=' attr in arr ' ng-attr-id=' div { { attr } } ' { { attr } }/div ul！-定义右边的点-Li ng-repeat=' attr in arr ' ng-click=' jump(' div ' attr)' { { attr } }/Li/ul/div脚本src=' http : angular。量滴js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本类型=' text/JavaScript ' var app=angular。模块(' myApp '，[])；app.controller('show '，['$scope '，' $location '，' $anchorScroll '，function($scope，$location，$anchorScroll){ $scope.arr=[1，2，3，4，5]；$ scope。jump=函数(id){//console。日志(id)；$位置。哈希(id)；//添加锚点$ anchor roll()；//重新定义服务，解决当滑动时点击锚点无作用的bug } }])；/脚本/正文/html运行效果如下：

点击锚点2:

点击锚点3:

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。