首页
所有分类
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 树控件 比较好用
Jun 11 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
浅谈js中对象的使用
Aug 11 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
Vue渲染函数详解
Sep 15 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 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
webpack(1) cudnn(1) Git(3) 脚本(1) callback(1) 字符画(1) 热力图(1) cudn(1) RTX 3050 ti(1) dict(1)
You might like
php中定义网站根目录的常用方法
2010/08/08 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
nginx 设置多个站跨域
2021/03/09 Servers
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js charAt的使用示例
2014/02/18 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Vue.js计算属性computed与watch（5）
2016/12/09 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
vue 实现LED数字时钟效果（开箱即用）
2019/12/08 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
世界上最大的隐形眼镜商店：1-800 Contacts
2018/11/03 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
汽车销售顾问求职自荐信
2014/01/01 职场文书
个人授权委托书
2014/04/03 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
大学学生会主席竞选稿怎么写？
2019/08/19 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android