Comment implémenter la fonction de saut dans AngularJS-js tutoriel-php.cn

Comment implémenter la fonction de saut dans AngularJS

亚连

Libérer： 2018-06-14 11:29:54

original

1867 Les gens l'ont consulté

Cet article présente principalement la fonction de saut au sol du point d'ancrage implémentée par AngularJS et implique les compétences opérationnelles associées à la réponse aux événements AngularJS pour implémenter la fonction de saut au point d'ancrage. Les amis dans le besoin peuvent s'y référer

Cet article. décrit les exemples de fonction de saut au sol du point d'ancrage implémentée par AngularJS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title>anchor</title>
    <style>
      #wei p{
        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">
      <p id="wei">
        <p ng-repeat="attr in arr" ng-attr-id="p{{attr}}">{{attr}}</p>
        <ul><!-- 定义右边的点 -->
          <li ng-repeat="attr in arr" ng-click="jump(&#39;p&#39;+attr)">{{attr}}</li>
        </ul>
      </p>
    <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var app = angular.module(&#39;myApp&#39;,[]);
      app.controller(&#39;show&#39;,[&#39;$scope&#39;,&#39;$location&#39;,&#39;$anchorScroll&#39;,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>

Copier après la connexion

L'effet de l'opération est le suivant :

Cliquez sur le point d'ancrage 2 :