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 相关文章推荐
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Jquery中对数组的操作代码
2011/08/12 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python操作文件的参数整理
2019/06/11 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
工作经常出错的检讨书
2014/09/13 职场文书
商业门面租房协议书
2014/11/25 职场文书
2015年超市工作总结
2015/04/09 职场文书
英语导游欢迎词
2015/09/30 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL