首页
所有分类
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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
全面解析JavaScript里的循环方法之forEach，for-in，for-of
Apr 20 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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
xhunter1.sys(1) 蓝牙(1) RustDesk(1) HarmonyOS(1) 蓝牙耳机(1) 鸿蒙3.0(1) Debian(1) 华为(1) 鸿蒙(2) 虚拟键盘(1)
You might like
php 短链接算法收集与分析
2011/12/30 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
js实现微信分享代码
2020/10/11 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
Python 自动化表单提交实例代码
2017/06/08 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
英国殿堂级有机护肤品牌：Rodial
2017/04/17 全球购物
Bally巴利英国官网：经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
秋季运动会活动方案
2014/02/05 职场文书
简单租房协议书
2014/04/09 职场文书
初中生期末评语大全
2014/04/24 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
2014年终个人工作总结
2014/11/07 职场文书
爱国影片观后感
2015/06/18 职场文书
爱国教育主题班会
2015/08/14 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js