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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
vue时间格式化实例代码
Jun 13 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
python的几种开发工具介绍
2007/03/07 Python
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
python实现三种随机请求头方式
2021/01/05 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
请解释在new与override的区别
2012/10/29 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
Java面试题汇总
2015/12/06 面试题
先进班级集体事迹材料
2014/01/30 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
建筑工程催款函
2015/06/24 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python