특정 디본 클릭으로 부드럽게 스크롤

특정 디본 클릭으로 부드럽게 스크롤

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

제가 필요한 것은 버튼을 클릭하면 div 'second'로 스크롤이 부드럽게 됩니다.

.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');
});

업데이트된 Jsfidle

jQuery, Mootools, Prototype 등과 같은 JS 라이브러리를 사용하여 부드럽게 스크롤하는 많은 예가 있습니다.

다음 예제는 순수 자바스크립트에 대한 것입니다.페이지에 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);
}

스크롤 인뷰 기능을 사용하면 어떻게 됩니까?

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

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

니코의 대답을 듣고 장난을 조금 쳤더니 펄쩍펄쩍 뛰었습니다.조사를 좀 해봤더니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);
}

나에게 효과적인 솔루션:

var element = document.getElementById("box");

element.scrollIntoView({behavior: "smooth"});

여기에서 더 많은 옵션을 탐색할 수 있습니다.

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

html {
  scroll-behavior: smooth;
}

나는 네드 록슨의 버전을 가져와서 위쪽으로 스크롤할 수 있도록 조정했습니다.

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

네드 록슨은 기본적으로 이 질문에 답합니다.하지만 그의 해결책에는 치명적인 결함이 있습니다.대상 요소가 뷰포트 높이보다 페이지 하단에 가까울 때 함수는 종료 문에 도달하지 않고 사용자를 페이지 하단에 붙잡습니다.이 문제는 반복 횟수를 제한함으로써 간단히 해결됩니다.

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

언급URL : https://stackoverflow.com/questions/18071046/smooth-scroll-to-specific-div-on-click