AngularJS 가 구현 한 맨 위로 돌아 가 는 명령 기능 인 스 턴 스

이 글 의 사례 는 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 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

AngularJS의 ng-options best practise

쓸데없는 말은 하지 말고 바로 코드를 찍어라. 리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다 angular에서 생성된 의value가 무엇인지, ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

AngularJS 가 구현 한 맨 위로 돌아 가 는 명령 기능 인 스 턴 스

좋은 웹페이지 즐겨찾기