AngularJS - $anchorScroll smooth/duration

后端 未结 7 1330
你的背包
你的背包 2020-12-04 07:52

Reading the AngularJS docs I haven\'t figured out if $anchorScroll can have a duration/easing option to smooth scroll to elements.

It only says:

7条回答
  •  予麋鹿
    予麋鹿 (楼主)
    2020-12-04 08:17

    Alan, thank you. If anyone interested, I formatted it based on John Pappa standards.

    (function() {
    
    'use strict';
    var moduleId = 'common';
    var serviceId = 'anchorSmoothScroll';
    
    angular
        .module(moduleId)
        .service(serviceId, anchorSmoothScroll);
    
    anchorSmoothScroll.$inject = ['$document', '$window'];
    
    function anchorSmoothScroll($document, $window) {
    
        var document = $document[0];
        var window = $window;
    
        var service = {
            scrollDown: scrollDown,
            scrollUp: scrollUp,
            scrollTo: scrollTo,
            scrollToTop: scrollToTop
        };
        return service;
    
        function getCurrentPagePosition(currentWindow, doc) {
            // Firefox, Chrome, Opera, Safari
            if (currentWindow.pageYOffset) return currentWindow.pageYOffset;
            // Internet Explorer 6 - standards mode
            if (doc.documentElement && doc.documentElement.scrollTop)
                return doc.documentElement.scrollTop;
            // Internet Explorer 6, 7 and 8
            if (doc.body.scrollTop) return doc.body.scrollTop;
            return 0;
        }
    
        function getElementY(doc, element) {
            var y = element.offsetTop;
            var node = element;
            while (node.offsetParent && node.offsetParent !== doc.body) {
                node = node.offsetParent;
                y += node.offsetTop;
            }
            return y;
        }
    
        function scrollDown(startY, stopY, speed, distance) {
    
            var timer = 0;
    
            var step = Math.round(distance / 25);
            var leapY = startY + step;
    
            for (var i = startY; i < stopY; i += step) {
                setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
                leapY += step;
                if (leapY > stopY) leapY = stopY;
                timer++;
            }
        };
    
        function scrollUp(startY, stopY, speed, distance) {
    
            var timer = 0;
    
            var step = Math.round(distance / 25);
            var leapY = startY - step;
    
            for (var i = startY; i > stopY; i -= step) {
                setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
                leapY -= step;
                if (leapY < stopY) leapY = stopY;
                timer++;
            }
        };
    
        function scrollToTop(stopY) {
            scrollTo(0, stopY);
        };
    
        function scrollTo(elementId, speed) {
    
            var element = document.getElementById(elementId);
    
            if (element) {
                var startY = getCurrentPagePosition(window, document);
                var stopY = getElementY(document, element);
    
                var distance = stopY > startY ? stopY - startY : startY - stopY;
    
                if (distance < 100) {
                    this.scrollToTop(stopY);
    
                } else {
    
                    var defaultSpeed = Math.round(distance / 100);
                    speed = speed || (defaultSpeed > 20 ? 20 : defaultSpeed);
    
                    if (stopY > startY) {
                        this.scrollDown(startY, stopY, speed, distance);
                    } else {
                        this.scrollUp(startY, stopY, speed, distance);
                    }
                }
    
            }
    
        };
    
    };
    
    })();
    

提交回复
热议问题