suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Sprungfunktion in AngularJS

So implementieren Sie die Sprungfunktion in AngularJS

亚连
亚连Original
2018-06-14 11:29:541826Durchsuche

In diesem Artikel wird hauptsächlich die von AngularJS implementierte Ankerpunkt-Bodensprungfunktion vorgestellt und die zugehörigen Betriebsfähigkeiten der AngularJS-Ereignisreaktion zur Implementierung der Ankerpunktsprungfunktion behandelt

Dieser Artikel Beschreibt die Beispiele der von AngularJS implementierten Ankerpunkt-Bodensprungfunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

<!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>

Der Vorgangseffekt ist wie folgt:

Klicken Sie auf Ankerpunkt 2:

Klicken Sie auf Ankerpunkt 3:

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So konfigurieren Sie Multi-Site-Vhost in Nginx

So implementieren Sie das Senden von Hintergrunddaten in Express+Mockjs

Verwenden Sie Mock.js, um Zufallsdaten zu generieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Sprungfunktion in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie die Drag-and-Drop-Funktion in AngularJSNächster Artikel：So implementieren Sie die Drag-and-Drop-Funktion in AngularJS

In Verbindung stehende Artikel

Mehr sehen