AngularJS实现锚点楼层跳转功能示例

作者：键盘侠

时间：2026-10-22

本文介绍如何在AngularJS中实现点击锚点自动跳转至对应楼层的功能。通过结合$location.hash设置锚点标识，并调用$anchorScroll服务触发浏览器滚动，解决滑动状态下点击锚点失效的问题。示例包含完整的HTML结构与AngularJS控制器代码，适用于需要页面内快速导航的场景。

文章目录

AngularJS锚点跳转实现

本文介绍AngularJS实现锚点楼层跳转功能的具体方法，供读者参考。


<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title>anchor</title>
    <style>
      #wei div{
        width:100%;
        height:720px;
        background: red;
        color:#fff;
        text-align:center;
        line-height: 720px;
        margin:20px;
        font-size: 80px;
      }
      #wei ul{
        position: fixed;
        top:300px;
        right:60px;
      }
      #wei ul li{
        width:20px;
        display:block;
        height:20px;
        background: gray;
        color:#fff;
        text-align:center;
        line-height: 20px;
        border-radius: 50%;
        margin-bottom: 20px;
        cursor: pointer;
      }
    </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>
    <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var app = angular.module('myApp',[]);
      app.controller('show',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
        $scope.arr=[1,2,3,4,5];
        $scope.jump=function(id){
          //console.log(id);
          $location.hash(id);//添加锚点
          $anchorScroll();  //重新定义服务,解决当滑动时点击锚点无作用的bug
        }
      }]);
    </script>
  </body>
</html>

运行效果如下：

点击锚点2：

AngularJS锚点跳转实现