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

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

HTML片段代码1：

 <div class="text-center bigtop">                <go-you-want>                    <img ng-src="{{downimg}}"/>                </go-you-want>   </div>

HTML片段代码2：

 <div class="goTop clearfix" style="position: fixed;right: 10px;bottom: 200px;">            <back-to-top class="label " title="返回顶部"><img src="img/gotop_03.png"/></back-to-top> </div>

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);            });        }    };});