เลื่อนไปยัง div เฉพาะเมื่อคลิก

สิ่งที่ฉันพยายามทำคือทำให้ถ้าคุณคลิกที่ปุ่มมันจะเลื่อนลง (อย่างราบรื่น) ไปยัง 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

มีตัวอย่างมากมายของการเลื่อนอย่างราบรื่นโดยใช้ไลบรารี JS เช่น jQuery, Mootools, Prototype และอื่น ๆ

ตัวอย่างต่อไปนี้ใช้ 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);
}

ฉันเล่นกับคำตอบของ nico เล็กน้อยและมันก็ดูน่ากลัว ตรวจสอบและพบว่า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(); 

มี {พฤติกรรม: "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 ตอบคำถามนี้โดยทั่วไป อย่างไรก็ตามมีข้อบกพร่องร้ายแรงในการแก้ปัญหาของเขา เมื่อองค์ประกอบเป้าหมายอยู่ใกล้ด้านล่างของหน้ามากกว่าความสูงของวิวพอร์ตฟังก์ชันจะไม่ถึงคำสั่ง 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);
}