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

时间：2021-05-28

本文实例讲述了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指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章