Angular封装指令回到顶部以及滚动到特定的页面位置

主要是使用angular的指令系统来自己封装一个指令。其写法有多种，这里只是很简单的一种写法。

HTML片段代码1：

 

               
                   
               
   

HTML片段代码2：

 

           
 

js指令：

myApp.directive("goYouWant", function() {
    return {
        restrict : "E",
        link : function(scope, element, attr) {
            var e = $(element);
            var firstDivHeight = $('.firstH').outerHeight();  //这里需要自己定义需要到达的地方
            e.click(function() {
                $('body, html').animate({
                    "scrollTop" : firstDivHeight
                }, 500)
            })
        }
    }
});

//回到顶部
//var flag = false;
myApp.directive("backToTop", function () {
    return {
        restrict: "E",
        link: function (scope, element, attr) {
            var e = $(element);
            if($(document).scrollTop() == 0) {
                e.fadeOut(200);
            }
            $(window).scroll(function () {                 //滚动时触发
                console.log($(document).scrollTop())
                if ($(document).scrollTop() > 800) {
                    //flag = true;
                    e.fadeIn(300);
                }    //获取滚动条到顶部的垂直高度,到相对顶部800px高度显示
                else {
                    //flag = false;
                    e.fadeOut(200);
                }
            });
            /*点击回到顶部*/
            e.click(function () {
                $('html, body').animate({                 //添加animate动画效果
                    scrollTop: 0
                }, 1000);
            });
        }
    };
});