Défilement fluide vers une division spécifique en cas de clic

Question

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) vers une division spécifique de la page.

Ce dont j'ai besoin, c'est que si vous cliquez sur le bouton, il défile en douceur jusqu'à la division '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>

Answer 1

Faire :

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

Mise à jour de Jsfiddle

Answer 2

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

L'exemple suivant porte sur du pur JavaScript. Si vous n'avez pas de jQuery/Mootools/Prototype sur la page ou si vous ne voulez pas surcharger la page avec des bibliothèques JS lourdes, l'exemple 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;
}

JS Part :

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

Answer 3

Et si vous utilisez la fonction scrollIntoView ?

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

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

Answer 4

J'ai joué un peu avec la réponse de Nico et ça m'a semblé bizarre. J'ai fait un peu de recherche et j'ai trouvé window.requestAnimationFrame qui est une fonction qui est appelée à chaque cycle de repeinture. Cela permet d'obtenir une animation plus propre. J'essaie toujours d'affiner les bonnes valeurs par défaut pour la taille des pas, mais pour mon exemple, les choses semblent plutôt bien se passer avec 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);
}

Answer 5

La solution qui a fonctionné pour moi :

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

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

Vous pouvez explorer d'autres options aquí