Maison >interface Web >js tutoriel >Comment implémenter la fonction de saut dans AngularJS

Comment implémenter la fonction de saut dans AngularJS

亚连original: 2018-06-14 11:29:541862parcourir

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>

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

Cliquez sur le point d'ancrage 2 :

Cliquez sur Ancre 3 :

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment configurer un vhost multi-site dans Nginx

Comment implémenter l'envoi de données en arrière-plan dans express+mockjs

Utilisez mock.js pour générer des données aléatoires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la fonction glisser-déposer dans AngularJSArticle suivant：Comment implémenter la fonction glisser-déposer dans AngularJS

Articles Liés

Voir plus