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

 更新时间:2018年01月02日 12:13:19   作者:Web攻城狮  
这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下

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

点击锚点3:

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • AngularJS教程之简单应用程序示例

    AngularJS教程之简单应用程序示例

    本文主要介绍AngularJS简单应用程序,这里提供了详细的流程和代码程序,有需要的小伙伴可以参考下
    2016-08-08
  • angularJS深拷贝详解

    angularJS深拷贝详解

    本篇文章主要介绍了angularJS深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Angularjs自定义指令Directive详解

    Angularjs自定义指令Directive详解

    Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧
    2017-05-05
  • 深入理解Angularjs向指令传递数据双向绑定机制

    深入理解Angularjs向指令传递数据双向绑定机制

    这篇文章主要深入的给大家介绍了Angularjs向指令传递数据,双向绑定机制的相关资料,需要的朋友可以参考下
    2016-12-12
  • AngularJS动态加载模块和依赖的方法分析

    AngularJS动态加载模块和依赖的方法分析

    这篇文章主要介绍了AngularJS动态加载模块和依赖的方法,结合实例形式分析了AngularJS使用ocLazyLoad实现动态加载的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • angular4模块中给标签添加背景图的实现方法

    angular4模块中给标签添加背景图的实现方法

    下面小编就为大家带来一篇angular4模块中给标签添加背景图的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅谈Angular.js中使用$watch监听模型变化

    浅谈Angular.js中使用$watch监听模型变化

    当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件。本篇文章主要介绍了Angular.js中使用$watch监听模型变化,有兴趣的可以了解一下
    2017-01-01
  • SpringMVC简单整合Angular2的示例

    SpringMVC简单整合Angular2的示例

    这篇文章主要介绍了SpringMVC简单整合Angular2的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angular4编程之表单响应功能示例

    Angular4编程之表单响应功能示例

    这篇文章主要介绍了Angular4编程之表单响应功能,结合实例形式分析了Angular4表单响应功能的具体实现步骤与相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • 使用Angular CLI进行Build(构建)和Serve详解

    使用Angular CLI进行Build(构建)和Serve详解

    这篇文章主要介绍了使用Angular CLI进行Build(构建)和Serve详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论