用angular做一个前往顶部的按钮

 .directive('backToTop', function ($timeout) {
        return {
            restrict: 'EA',
            template: '<div class="top-top" ><img src="./image/toTop.png"/></div>',
            replace: true,
            link: function (scope, element, attr) {
                var e = $(element);
                if($(document).scrollTop() == 0) {
                    e.fadeOut(200);
                }
                $(window).scroll(function () {                 //滚动时触发
                    if ($(document).scrollTop() > 300) {
                        e.fadeIn(300);
                        timeoutDisplay(e);
                    }else {
                        e.fadeOut(200);
                    }
                });
                /*点击回到顶部*/
                e.click(function () {
                    $('html, body').animate({
                        scrollTop: 0
                    }, 500);
                });
                //定时消失
                var timeoutDisplay=function(e){
                    var timer=$timeout(function(){
                        e.hide();
                    },4000);
                    timer.then(function(){
                        $timeout.cancel(timer);
                    });
                }
            }
        };
    })

猜你喜欢

转载自blog.csdn.net/aerbaba/article/details/78468425
今日推荐