[javascript] 클릭시 특정 div로 부드럽게 스크롤

Program / 글쓴이

내가하려는 것은 버튼을 클릭하면 페이지의 특정 div로 (부드럽게) 스크롤되도록 만드는 것입니다.

내가 필요한 것은 버튼을 클릭하면 div ‘초’로 부드럽게 스크롤됩니다.

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}
<div class="first"><button type="button">Click Me!</button></div>
<div class="second">Hi</div>

스 니펫 확장

답변

하다:

$("button").click(function() {
    $('html,body').animate({
        scrollTop: $(".second").offset().top},
        'slow');
});

Jsfiddle 업데이트

답변

jQuery, Mootools, Prototype 등과 같은 JS 라이브러리를 사용한 부드러운 스크롤링의 예가 많이 있습니다.

다음 예제는 순수 JavaScript에 있습니다. 페이지에 jQuery / Mootools / Prototype이 없거나 무거운 JS 라이브러리로 페이지를 오버로드하지 않으려면 예제가 도움이 될 것입니다.

http://jsfiddle.net/rjSfP/

HTML 부분 :

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<div class="second" id="second">Hi</div>

CSS 부분 :

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

JS 부분 :

window.smoothScroll = function(target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    scroll = function(c, a, b, i) {
        i++; if (i > 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function(){ scroll(c, a, b, i); }, 20);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

답변

나는 니코의 대답을 조금 가지고 놀았고 불안해했다. 약간의 조사를 수행하고 window.requestAnimationFrame각 다시 그리기주기에서 호출되는 함수를 찾았습니다 . 이를 통해보다 깔끔한 애니메이션을 만들 수 있습니다. 단계 크기에 대한 좋은 기본값을 계속 연마하려고하지만 내 예제에서는이 구현을 사용하여 매우 좋아 보입니다.

var smoothScroll = function(elementId) {
    var MIN_PIXELS_PER_STEP = 16;
    var MAX_SCROLL_STEPS = 30;
    var target = document.getElementById(elementId);
    var scrollContainer = target;
    do {
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do {
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
                                 (targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);

    var stepFunc = function() {
        scrollContainer.scrollTop =
            Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop);

        if (scrollContainer.scrollTop >= targetY) {
            return;
        }

        window.requestAnimationFrame(stepFunc);
    };

    window.requestAnimationFrame(stepFunc);
}

답변

scrollIntoView 기능을 사용하면 어떻게 되나요?

var elmntToView = document.getElementById("sectionId");
elmntToView.scrollIntoView();

{behavior : “smooth”}도 있습니다 ….;) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

답변

나는 Ned Rockson 의 버전을 가져 와서 위쪽 스크롤도 허용하도록 조정했습니다.

var smoothScroll = function(elementId) {
  var MIN_PIXELS_PER_STEP = 16;
  var MAX_SCROLL_STEPS = 30;
  var target = document.getElementById(elementId);
  var scrollContainer = target;
  do {
    scrollContainer = scrollContainer.parentNode;
    if (!scrollContainer) return;
    scrollContainer.scrollTop += 1;
  } while (scrollContainer.scrollTop === 0);

  var targetY = 0;
  do {
    if (target === scrollContainer) break;
    targetY += target.offsetTop;
  } while (target = target.offsetParent);

  var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
    Math.abs(targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);

  var isUp = targetY < scrollContainer.scrollTop;

  var stepFunc = function() {
    if (isUp) {
      scrollContainer.scrollTop = Math.max(targetY, scrollContainer.scrollTop - pixelsPerStep);
      if (scrollContainer.scrollTop <= targetY) {
        return;
      }
    } else {
        scrollContainer.scrollTop = Math.min(targetY, scrollContainer.scrollTop + pixelsPerStep);

      if (scrollContainer.scrollTop >= targetY) {
        return;
      }
    }

    window.requestAnimationFrame(stepFunc);
  };

  window.requestAnimationFrame(stepFunc);
};

답변

부드러운 스크롤을 얻기 위해 기본 CSS를 사용할 수 있습니다.

html {
  scroll-behavior: smooth;
}

답변

Ned Rockson은 기본적으로이 질문에 답합니다. 그러나 그의 솔루션에는 치명적인 결함이 있습니다. 대상 요소가 viewport-height보다 페이지 하단에 더 가까우면 함수가 exit 문에 도달하지 않고 페이지 하단에있는 사용자를가 둡니다. 이것은 반복 횟수를 제한하여 간단히 해결됩니다.

var smoothScroll = function(elementId) {
    var MIN_PIXELS_PER_STEP = 16;
    var MAX_SCROLL_STEPS = 30;
    var target = document.getElementById(elementId);
    var scrollContainer = target;
    do {
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do {
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
                                 (targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);

    var iterations = 0;
    var stepFunc = function() {
        if(iterations > MAX_SCROLL_STEPS){
            return;
        }
        scrollContainer.scrollTop =
            Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop);

        if (scrollContainer.scrollTop >= targetY) {
            return;
        }

        window.requestAnimationFrame(stepFunc);
    };

    window.requestAnimationFrame(stepFunc);
}