Rumah > hujung hadapan web > tutorial js > 在AngularJS中如何实现跳转功能

在AngularJS中如何实现跳转功能

亚连
Lepaskan: 2018-06-14 11:29:54
asal
1944 orang telah melayarinya

这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下

本文实例讲述了AngularJS实现的锚点楼层跳转功能。分享给大家供大家参考,具体如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

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

Salin selepas log masuk

运行效果如下:

点击锚点2:

点击锚点3:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Nginx中如何配置多站点vhost

在express+mockjs中如何实现后台数据发送

使用mock.js生成随机数据

Atas ialah kandungan terperinci 在AngularJS中如何实现跳转功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan