Gulir halus ke div tertentu saat diklik

Apa yang saya coba lakukan adalah membuatnya sehingga jika Anda mengklik sebuah tombol, tombol itu akan bergulir ke bawah (dengan lancar) ke div tertentu pada halaman.

Yang saya butuhkan adalah jika Anda mengklik tombolnya, itu akan menggulung halus ke div 'detik'.

.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>

melakukan:

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

Diperbarui Jsfiddle

Ada banyak contoh pengguliran halus menggunakan pustaka JS seperti jQuery, Mootools, Prototype, dll.

Contoh berikut adalah pada JavaScript murni. Jika Anda tidak memiliki jQuery / Mootools / Prototype di halaman atau Anda tidak ingin membebani halaman dengan library JS yang berat, contohnya akan membantu.

http://jsfiddle.net/rjSfP/

Bagian HTML:

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

Bagian CSS:

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

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

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

Saya bermain-main dengan jawaban nico sedikit dan rasanya gelisah. Melakukan sedikit penyelidikan dan menemukan window.requestAnimationFramefungsi yang dipanggil pada setiap siklus pengecatan ulang. Ini memungkinkan animasi yang tampak lebih bersih. Masih mencoba untuk mengasah nilai default yang baik untuk ukuran langkah tetapi untuk contoh saya hal-hal terlihat cukup bagus menggunakan implementasi ini.

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

Bagaimana jika Anda menggunakan fungsi scrollIntoView?

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

Memiliki {perilaku: "smooth"} juga ....;) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Saya mengambil versi Ned Rockson dan menyesuaikannya untuk memungkinkan gulungan ke atas juga.

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

Anda dapat menggunakan css dasar untuk mendapatkan scroll yang mulus

html {
  scroll-behavior: smooth;
}

Ned Rockson pada dasarnya menjawab pertanyaan ini. Namun ada kesalahan fatal dalam solusinya. Saat elemen yang ditargetkan lebih dekat ke bagian bawah halaman daripada tinggi viewport, fungsi tersebut tidak mencapai pernyataan keluarnya dan menjebak pengguna di bagian bawah halaman. Ini hanya diselesaikan dengan membatasi jumlah iterasi.

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