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


Posted in Javascript onJanuary 02, 2018

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 #Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 #Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 #Javascript
You might like
实例讲解通过​PHP创建数据库
2019/01/20 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Python如何生成树形图案
2018/01/03 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
资深财务管理人员自我评价
2013/09/22 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
劳资协议书范本
2014/04/23 职场文书
2014年党务公开方案
2014/05/08 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
优秀毕业生求职信
2014/06/05 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
英文演讲稿开场白
2014/08/25 职场文书
企业务虚会发言材料
2014/10/20 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
博士生专家推荐信
2015/03/25 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
讲解MySQL增删改操作
2022/05/06 MySQL