Faites défiler en douceur jusqu'à un div spécifique en cliquant

Ce que j'essaie de faire, c'est de faire en sorte que si vous cliquez sur un bouton, il défile vers le bas (en douceur) jusqu'à un div spécifique sur la page.

Ce dont j'ai besoin, c'est que si vous cliquez sur le bouton, il défile en douceur jusqu'à la div «seconde».

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

faire:

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

Jsfiddle mis à jour

Il existe de nombreux exemples de défilement fluide à l'aide de bibliothèques JS telles que jQuery, Mootools, Prototype, etc.

L'exemple suivant est sur du JavaScript pur. Si vous n'avez pas de jQuery / Mootools / Prototype sur la page ou si vous ne voulez pas surcharger la page avec de lourdes bibliothèques JS, l'exemple vous sera utile.

http://jsfiddle.net/rjSfP/

Partie HTML:

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

Partie CSS:

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

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

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

J'ai joué un peu avec la réponse de nico et c'était nerveux. J'ai fait un peu d'enquête et j'ai trouvé window.requestAnimationFramequelle fonction est appelée à chaque cycle de repeinture. Cela permet une animation plus propre. J'essaie toujours de se concentrer sur de bonnes valeurs par défaut pour la taille des pas, mais pour mon exemple, les choses semblent plutôt bonnes en utilisant cette implémentation.

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

Et si vous utilisez la fonction scrollIntoView?

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

A un {comportement: "smooth"} aussi ....;) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

J'ai pris la version de Ned Rockson et je l' ai ajustée pour permettre également les défilements vers le haut.

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

Vous pouvez utiliser le CSS de base pour obtenir un défilement fluide

html {
  scroll-behavior: smooth;
}