AngularJS - $ anchorScroll顺利/持续时间AngularJS - $

读AngularJS文档我还没有想出如果$anchorScroll可以有一个持续时间/宽松选项来平滑滚动到元素。

它只是说：

$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

我不使用jQuery和不想; 是还有一个聪明而简单的方式，使或延长$anchorScroll为了使滚动更加流畅？

Answer 1:

不幸的是这个使用是不可能$anchorScroll 。当你发现$anchorScroll没有任何选择，不与工作$ngAnimate 。为了动画滚动，你将需要使用自己的服务/工厂或只是直接的JavaScript。

对于自主学习的缘故，我放在一起的例子具有平滑滚动的服务。可能有更好的方法来做到这一点，因此任何反馈是鼓励。

滚动到一个元素附加一个ng-click="gotoElement(ID)"的任何元素。我想一个更好的途径是使这个指令。

以下是对的jsfiddle工作示例。

更新

现在有许多第三方指令完成这个的。

https://github.com/oblador/angular-scroll 。
https://github.com/d-oliveros/ngSmoothScroll
https://github.com/arnaudbreton/angular-smoothscroll
https://gist.github.com/justinmc/d72f38339e0c654437a2

Answer 2:

您还可以使用角度滚动，点击链接“ https://github.com/durated/angular-scroll/ ”。这是平滑滚动也很少宽松函数来获得一个专业的外观。

Answer 3:

从布雷特答案对我来说真是棒极了。我做的模块化和可测试性方面对他解决一些小的修改。

这里的是另一种对工作的jsfiddle例如，包括其他的版本包括测试。

为了测试，我使用的是噶和茉莉花。签名已被稍微修改如下：

 anchorSmoothScroll.scrollTo(elementId, speed);

其中元件是强制属性滚动到与速度是可选的，其中默认值是20（因为它是前）。

Answer 4:

您还可以使用ngSmoothScroll，链接： https://github.com/d-oliveros/ngSmoothScroll 。

只是包括smoothScroll模块作为依赖和使用它像这样：

<a href="#" scroll-to="my-element-3">Click me!</a>

Answer 5:

该解决方案中没有真正在这里做什么OP最初要求，即，使$anchorScroll顺利滚动。平滑滚动指令和之间差别$anchroScroll是，它使用/会修改$location.hash()这可能是在某些情况下期望的。

这是依据简单的模块替换$ anchorScroll与平滑滚动滚动。它采用https://github.com/oblador/angular-scroll库滚动本身（如果你想，它应该很容易用别的东西代替它）。

https://gist.github.com/mdvorak/fc8b531d3e082f3fdaa9
注意：它实际上没有得到$ anchorScroll顺利滚动，但它取代它的处理程序滚动。

简单地通过引用启用它mdvorakSmoothScroll在你的应用程序模块。

Answer 6:

艾伦，谢谢你。如果有人有兴趣，我格式化它根据约翰PAPP-A标准。

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

        }

    };

};

})();

Answer 7:

我不知道如何制作动画$anchorScroll 。下面是我如何做到这一点在我的项目：

/* Scroll to top on each ui-router state change */
$rootScope.$on('$stateChangeStart', function() {
 scrollToTop();
});

而JS功能：

function scrollToTop() {
    if (typeof jQuery == 'undefined') {
        return window.scrollTo(0,0);
    } else {
        var body = $('html, body');
        body.animate({scrollTop:0}, '600', 'swing');
    }
    log("scrollToTop");
    return true;
}

文章来源: AngularJS - $anchorScroll smooth/duration