Angular JS - $anchor Scroll 스무스 / 지속시간

Angular JS - $anchor Scroll 스무스 / 지속시간

각도 읽기JS docs 아직 파악하지 못했습니다.$anchorScroll에는 요소에 대한 스크롤을 부드럽게 하기 위한 지속 시간/시간 옵션이 있습니다.

다음과 같은 내용만 기재되어 있습니다.

$location.hash('bottom');

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

나는 jquery를 사용하지 않고 원하지 않는다. 여전히 영리하지만 간단한 만들기 또는 확장 방법이 있는가?$anchorScroll스크롤을 좀 더 부드럽게 하기 위해서?

유감스럽게도, 이것은 다음의 방법으로 사용할 수 없습니다.$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

또한 각도 조정 링크 "https://github.com/durated/angular-scroll/"을 사용할 수도 있습니다.부드러운 스크롤과 프로페셔널한 느낌을 주는 간단한 기능도 거의 없습니다.

브렛의 답변은 나에게 매우 효과가 있었다.모듈화와 테스트 가능성 측면에서 그의 솔루션에 대해 몇 가지 작은 변경을 가했습니다.

JsFiddle에 대한 또 다른 작업 예는 테스트를 포함한 다른 버전을 포함합니다.

테스트에는 카르마와 재스민을 사용하고 있습니다.시그니처는 다음과 같이 약간 변경되었습니다.

 anchorSmoothScroll.scrollTo(elementId, speed);

여기서 element는 스크롤해야 하는 필수 Atribute이고 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모듈로 이동합니다.

앨런, 고마워.관심 있는 사람이 있으면 존 파파 기준에 따라 포맷해놨어요

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

JQuery와 Javascript를 Directive와 함께 사용하여 앵커 태그 클릭 시 특정 div까지 스크롤할 수 있습니다.

아래 링크에서 작업 예를 확인하십시오.

https://stackoverflow.com/a/67513880/6656918

언급URL : https://stackoverflow.com/questions/21749878/angularjs-anchorscroll-smooth-duration