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

2019-11-19 14:36:49

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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：