關於angularJS如何回到頂部，還是直接code吧！

1.構建指令，使用registerDirective構建指令新增到內部的hasDirectives物件內，以方便後面在全域性查詢指令的時候進行匹配。

/**
**回到頂部
**/

define(["app"], function (app) {
    
    app().registerDirective("backToTop", function () {
        return {
            restrict: "E",
            link: function (scope, element, attr) {
                var e = $(element);
                $(window).scroll(function () {                 //滾動時觸發
                    if ($(document).scrollTop() > 300)         //獲取滾動條到頂部的垂直高度,到相對頂部300px高度顯示
                        e.fadeIn(300)
                    else
                        e.fadeOut(200);
                });
                /*點選回到頂部*/
                e.click(function () {
                    $('html, body').animate({                 //新增animate動畫效果
                        scrollTop: 0
                    }, 500);
                });
            }
        };
    });
});
 

注：

registerDirective 是$CompileProvider的方法，主要就是把內建指令新增到內部的hasDirectives物件內，以方便後面在全域性查詢指令的時候進行匹配。

指令從html的角度，可以認為指令名字是一個識別符號，可以作為元素名（E），元素屬性（A）,註釋（M），類名（C）出現在html中；而從javaScript的角度，則可以認為是返回的一個規範化的有特殊意義的指令物件。

link函式建立可以操作dom的指令，簽名如下：

link:function(scope,element,attrs){

};

scope     在其內部作用域註冊監聽器的作用域。

element    代表例項元素,指使用此指令的元素。在postLink函式中我們應該只操作此 元素的子元素,因為子元素已經被連結過了。 

attrs     代表例項屬性,是一個由定義在元素上的屬性組成的標準化列表,可以在所有指 令的連結函式間共享。會以JavaScript物件的形式進行傳遞。 2. 將定義的 backToTop 指令物件在頁面呼叫。

2.在頁面呼叫backToTop指令

<back-to-top class="back_top" title="返回頂部"><i class="fa fa-angle-up"></i></back-to-top>
 

注：

restrict - EACM的子集的字串，它限制directive為指定的宣告方式。如果省略的話，directive將僅僅允許通過屬性宣告：

E - 元素名稱： <back-to-top></back-to-top>

A - 屬性名： <div back-to-top</div>

C - class名： <div class=”back-to-top”></div>

M - 註釋 ： <!-- back-to-top -->