AngularJS实现的回到顶部指令功能实例


Posted in Javascript onMay 17, 2017

本文实例讲述了AngularJS实现的回到顶部指令功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
  <script src="jquery.min.js"></script>
  <script src="angular.js"></script>
  <script src="bootstrap.min.js"></script>
  <style type="text/css">
   #gotoTop {
    display: none;
    position: fixed;
    top: 80%;
    left: 90%;
    cursor: pointer;
    padding: 4px 4px;
    width: 50px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 50px;
    height: 50px;
   }
   #gotoTop.hover {
    background: #e0e0e0;
    color: #fff;
    text-decoration: none;
   }
   .arrow {
    width: 0;
    height: 0;
    margin: 0 auto;
    border: 9px solid transparent;
    border-bottom-color: #aaa;
   }
   .stick {
    width: 8px;
    height: 14px;
    margin: 0 auto;
    border-radius: 1px;
    background-color: #aaa;
   }
  </style>
  <script type="text/javascript">
      var myapp = angular.module('myapp', []);
      myapp.directive("goToTop", function() {
       return {
        restrict: 'E',
        replace: true,
        scope: {
         minHeight : '@'
        },
        templateUrl : 'tmpl.html',
        link: function(scope, elem, attrs) {
         elem.click(function() {
          jQuery('html,body').animate({scrollTop:0}, 700);
         })
         .hover(function() {
          jQuery(this).addClass("hover");
         }, function() {
          jQuery(this).removeClass("hover");
         });
         scope.minHeight = scope.minHeight ? scope.minHeight : 600;
         jQuery(window).scroll(function() {
           var s = jQuery(window).scrollTop();
           if( s > scope.minHeight) {
             jQuery("#gotoTop").fadeIn(100);
           } else {
             jQuery("#gotoTop").fadeOut(200);
           };
         });
        }
       };
      });
  </script>
 </head>
 <body ng-app="myapp">
   <go-to-top min-height="800"></go-to-top>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
   <h1>hello world</h1>
 </body>
</html>

tmpl.html

<div id="gotoTop" title="返回顶部">
 <div class="arrow"></div>
 <div class="stick"></div>
</div>

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

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
bootstrap模态框示例代码分享
May 17 #Javascript
ES6入门教程之let和const命令详解
May 17 #Javascript
详解如何在Angular中快速定位DOM元素
May 17 #Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 #Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 #Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
AngularJS使用拦截器实现的loading功能完整实例
May 17 #Javascript
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
详解django三种文件下载方式
2018/04/06 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python函数和模块的使用总结
2019/05/20 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Python 列表反转显示的四种方法
2020/11/16 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
联想英国官网:Lenovo英国
2019/07/17 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
差生评语大全
2014/05/04 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
学历证明样本
2015/06/16 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
理解python中装饰器的作用
2021/07/21 Python