首页 / ANGULAR / AngularJS实现的锚点楼层跳转功能示例

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS实现的锚点楼层跳转功能示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1385字，纯文字阅读大概需要2分钟。

内容图文

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

AngularJS实现的锚点楼层跳转功能示例 - 文章图片

点击锚点3：

AngularJS实现的锚点楼层跳转功能示例 - 文章图片

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

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

内容总结

以上是互联网集市为您收集整理的AngularJS实现的锚点楼层跳转功能示例全部内容，希望文章能够帮你解决AngularJS实现的锚点楼层跳转功能示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/338967.html

来源：【匿名】