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

最新推荐文章于 2021-01-04 16:18:26 发布

阿阿阿尔呀

最新推荐文章于 2021-01-04 16:18:26 发布

阅读量479

点赞数

分类专栏： angular.js

本文链接：https://blog.csdn.net/aerbaba/article/details/78468425

版权

angular.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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