首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

timelessmemoryli

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
深入理解JavaScript系列（30）：设计模式之外观模式详解
Mar 03 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
JavaScript数组方法总结分析
May 06 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 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
GZIP(2) .NET Framework(2) IIS7(1) 磁盘分区(1) 事务并发(1) DBLink(1) DNS服务器(2) 复读(1) 幻读(5) FTP服务器(1)
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php的socket编程详解
2016/11/20 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色，以及怎样让滚动条变得扁平
2007/04/20 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
python 打印对象的所有属性值的方法
2016/09/11 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python实现括号匹配方法详解
2020/02/10 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
zooplus德国：便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
中科软笔试题和面试题
2014/10/07 面试题
综合测评自我鉴定
2013/10/08 职场文书
合伙经营协议书
2014/04/18 职场文书
考生诚信考试承诺书（2016版）
2016/03/25 职场文书
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技