jquery가 없는 맨 위 애니메이션 스크롤

jquery가 없는 맨 위 애니메이션 스크롤

이 질문에는 이미 다음과 같은 답변이 있습니다.

크로스 브라우저 자바스크립트(jQuery... 아님) 스크롤을 맨 위 애니메이션으로 이동 (22개 답변)

닫힘8년 전에.

저는 jQuery를 사용하지 않고 애니메이션 "스크롤 투 탑" 효과를 만들려고 노력하고 있습니다.

jQuery에서는 주로 다음 코드를 사용합니다.

$('#go-to-top').click(function(){ 
      $('html,body').animate({ scrollTop: 0 }, 400);
      return false; 
});

jQuery를 사용하지 않고 스크롤 탑을 애니메이션화하려면 어떻게 해야 합니까?

HTML:

<button onclick="scrollToTop(1000);"></button>

1# 자바스크립트(선형):

function scrollToTop (duration) {
    // cancel if already on top
    if (document.scrollingElement.scrollTop === 0) return;

    const totalScrollDistance = document.scrollingElement.scrollTop;
    let scrollY = totalScrollDistance, oldTimestamp = null;

    function step (newTimestamp) {
        if (oldTimestamp !== null) {
            // if duration is 0 scrollY will be -Infinity
            scrollY -= totalScrollDistance * (newTimestamp - oldTimestamp) / duration;
            if (scrollY <= 0) return document.scrollingElement.scrollTop = 0;
            document.scrollingElement.scrollTop = scrollY;
        }
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}

2# 자바스크립트 (간편히 들락날락):

function scrollToTop (duration) {
    // cancel if already on top
    if (document.scrollingElement.scrollTop === 0) return;

    const cosParameter = document.scrollingElement.scrollTop / 2;
    let scrollCount = 0, oldTimestamp = null;

    function step (newTimestamp) {
        if (oldTimestamp !== null) {
            // if duration is 0 scrollCount will be Infinity
            scrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration;
            if (scrollCount >= Math.PI) return document.scrollingElement.scrollTop = 0;
            document.scrollingElement.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount);
        }
        oldTimestamp = newTimestamp;
        window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}
/* 
  Explanation:
  - pi is the length/end point of the cosinus intervall (see below)
  - newTimestamp indicates the current time when callbacks queued by requestAnimationFrame begin to fire.
    (for more information see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
  - newTimestamp - oldTimestamp equals the delta time

    a * cos (bx + c) + d                        | c translates along the x axis = 0
  = a * cos (bx) + d                            | d translates along the y axis = 1 -> only positive y values
  = a * cos (bx) + 1                            | a stretches along the y axis = cosParameter = window.scrollY / 2
  = cosParameter + cosParameter * (cos bx)  | b stretches along the x axis = scrollCount = Math.PI / (scrollDuration / (newTimestamp - oldTimestamp))
  = cosParameter + cosParameter * (cos scrollCount * x)
*/

참고:

• 시간(밀리초)(1000ms = 1s)
• 두번째 스크립트는 cos 함수를 사용합니다.예제 곡선:

3# Github에서 간단한 스크롤 라이브러리

언급URL : https://stackoverflow.com/questions/21474678/scrolltop-animation-without-jquery