angularjs scrollTop

发布时间:2019-06-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angularjs scrollTop脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<style>
    .scrollToTop {
        position: fixed;
        bottom: 70px;
        right: 15px;
        width: 45px;
        height: 45px;
        border-radius: 25px;
        background: url(/forum/img/toTop.png) center center no-repeat rgba(0,0,0,.4);
        background-size: 50% 25%;
    }
</style>

//回到顶部
app.directive('scrollTop', function ($window, $document, $compile) {
    return {
        restrict: 'A',
        link: function ($scope, elem, attr, ctrl) {
            VAR elShare = Angular.element('<a title="返回顶部" ng-click="goTop()" class="scrollToTop"></a>');

            function showShare() {
                if (!elShare.hasClass('ng-scope')) {
                    $compile(elShare)($scope);
                    var body = $document.find('body').eq(0);
                    body.append(elShare);
                }
                elShare.show();
            }

            var loading = false;

            $scope.goTop = function () {
                var idToScroll = attr.href;

                var $target;
                if (idToScroll) {
                    $target = $(idToScroll);
                } else {
                    $target = elem;
                }

                loading = true;
                $("body").aniMATE({ scrollTop: $target.offset().top }, "fast", function () {
                    elShare.hide();
                    loading = false;
                });
            }

            //http://stackoverflow.COM/questions/13549216/changing-css-on-scrolling-angular-style
            var scrollTop = 0;
            var windowEl = angular.element($window);
            var handler = function () {
                if (loading) return;
                var ele = document.body;
                if (ele.scrollTop > 50 &amp;& scrollTop < ele.scrollTop) {
                    showShare();
                }
                else {
                    elShare.hide();
                }
                scrollTop = document.body.scrollTop;
            }
            windowEl.on('scroll', $scope.$apply.bind($scope, handler));
            handler();
        }
    };
});

脚本宝典总结

以上是脚本宝典为你收集整理的angularjs scrollTop全部内容,希望文章能够帮你解决angularjs scrollTop所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。