AngularJS-$ anchorScroll 부드러운 / 지속 시간

AngularJS-$ anchorScroll 부드러운 / 지속 시간

---

AngularJS 문서 읽기 $anchorScroll요소로 부드럽게 스크롤하는 지속 시간 / 완화 옵션이 있는지 알 수 없었습니다.

그것은 단지 말한다 :

$location.hash('bottom');

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

jquery를 사용하지 않으며 원하지 않습니다. $anchorScroll스크롤을 더 매끄럽게 만들기 위해 여전히 영리하지만 간단한 방법이 있습니까?

---

불행히도이 방법으로는 사용할 수 없습니다 $anchorScroll. 당신이 발견 $anchorScroll한 옵션이 없으며 작동하지 않습니다 $ngAnimate. 스크롤에 애니메이션을 적용하려면 자체 서비스 / 공장 또는 간단한 자바 스크립트를 사용해야합니다.

자체 학습을 위해 부드러운 스크롤 서비스와 함께 예제를 작성했습니다. 이 작업을 수행하는 더 좋은 방법이있을 수 있으므로 피드백을 권장합니다.

요소로 스크롤하려면 ng-click="gotoElement(ID)"임의의 요소 에 a 를 첨부합니다 . 더 좋은 길은 이것을 지시어로 만드는 것입니다.

다음 은 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

---

앵귤러 스크롤을 사용하여 " https://github.com/durated/angular-scroll/ " 링크를 사용할 수도 있습니다 . 전문적인 모양을 얻기 위해 부드럽게 스크롤하는 기능도 거의 없습니다.

---

Brett의 답변은 저에게 큰 도움이되었습니다. 모듈화 및 테스트 가능성 측면에서 솔루션을 약간 변경했습니다.

다음은 테스트가 포함 된 다른 버전을 포함하는 JsFiddle의 또 다른 실제 예제입니다 .

테스트를 위해 Karma와 Jasmine을 사용하고 있습니다. 서명은 다음과 같이 약간 수정되었습니다.

 anchorSmoothScroll.scrollTo(elementId, speed);

여기서 element는 필수 속성이며 speed는 선택 사항이며 기본값은 20입니다 (이전과 동일).

---

ngSmoothScroll을 사용할 수도 있습니다 ( https://github.com/d-oliveros/ngSmoothScroll) .

smoothScroll모듈을 종속성으로 포함시키고 다음 과 같이 사용하십시오.

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

---

여기에있는 솔루션 중 어느 것도 실제로 OP가 처음 요청한 것, 즉 $anchorScroll부드럽게 스크롤 하지 않습니다 . 부드러운 스크롤 지시문의 차이점은 $anchroScroll사용하고 수정한다는 것 $location.hash()입니다. 일부 경우에 바람직 할 수 있습니다.

$ anchorScroll 스크롤을 부드러운 스크롤로 대체하는 간단한 모듈의 요지가 있습니다. 그것은 스크롤 자체를 위해 https://github.com/oblador/angular-scroll 라이브러리를 사용 합니다 (원한다면 다른 것으로 대체하십시오).

https://gist.github.com/mdvorak/fc8b531d3e082f3fdaa9
참고 : 실제로 $ anchorScroll을 부드럽게 스크롤하지는 않지만 스크롤링을 위해 핸들러를 대체합니다.

mdvorakSmoothScroll애플리케이션에서 모듈 을 참조하여 간단히 활성화하십시오 .

---

앨런, 고마워 관심있는 사람은 John Pappa 표준을 기반으로 형식을 지정했습니다.

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

        }

    };

};

})();

---

나는 애니메이션하는 방법을 모른다 $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;
}

참고 URL : https://stackoverflow.com/questions/21749878/angularjs-anchorscroll-smooth-duration