Lisse de défilement de l'ancre des liens SANS jQuery

À l'aide de la fonction à partir d'ici: Animations JavaScript et de la modifier pour modifier une propriété (pas seulement un style de propriété), vous pouvez essayer quelque chose comme ceci:

function animate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            if (prop) {
                elem[style] = (from + step * (to - from))+unit;
            } else {
                elem.style[style] = (from + step * (to - from))+unit;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, 25);
    if (prop) {
          elem[style] = from+unit;
    } else {
          elem.style[style] = from+unit;
    }
}

window.onload = function () {
    var target = document.getElementById("div5");
    animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};

DÉMO: https://jsfiddle.net/zpu16nen/

Assurez-vous de la taille de la fenêtre assez petit donc il y a en fait une barre de défilement et peut faire défiler jusqu'à la 5ème div.

Et non, il ne nécessite que peu de loisirs de 25% de jQuery.

Ce serait évidemment needly fortement modifiées en fonction de ce que votre question signifie en fait (comme lorsque la fenêtre de modifications de hachage, ou quelque chose comme ça).

Noter qu'avec jQuery, c'est aussi simple que:

$(document).ready(function () {
    $("html, body").animate({
        scrollTop: $("#div5").offset().top
    }, 2000);
});

DÉMO: http://jsfiddle.net/7TAa2/1/

Viens de dire...

En fait, il est plus léger et simple à faire:
https://codepen.io/ugg0t/pen/mqBBBY

JS:

function scrollTo(element) {
  window.scroll({
    behavior: 'smooth',
    left: 0,
    top: element.offsetTop
  });
}

document.getElementById("button").addEventListener('click', () => {
  scrollTo(document.getElementById("8"));
});

CSS:

div {
  width: 100%;
  height: 200px;
  background-color: black;
}

div:nth-child(odd) {
  background-color: white;
}

button {
  position: absolute;
  left: 10px;
  top: 10px;
}

HTML:

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<button id="button">Button</button>

Transitions CSS3 avec un :target sélecteur peut donner un joli résultat sans JS piratage. J'étais juste en contemplant si imlement cela, mais sans Jquery il ne obtenir un peu désordonné. Voir cette question pour plus de détails.

Vanille js variante en utilisant requestAnimationFrame avec des levées et tous les navigateurs pris en charge:

const requestAnimationFrame = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame;

function scrollTo(to) {
    const start = window.scrollY || window.pageYOffset
    const time = Date.now()
    const duration = Math.abs(start - to) / 3;

    (function step() {
        var dx = Math.min(1, (Date.now() - time) / duration)
        var pos = start + (to - start) * easeOutQuart(dx)

        window.scrollTo(0, pos)

        if (dx < 1) {
            requestAnimationFrame(step)
        }
    })()
}

Tout l'assouplissement pris en charge!

Lisse de Défilement comportement avec polyfill...

Exemple:

document.querySelectorAll('a[href^="#"]').addEventListener("click", function(event) {
  event.preventDefault();
  document.querySelector(this.getAttribute("href")).scrollIntoView({ behavior: "smooth" });
});

Référentiel: https://github.com/iamdustan/smoothscroll

C'est la version mise à niveau à partir de @Ian

//Animated scroll with pure JS
//duration constant in ms
const animationDuration = 600;
//scrollable layout
const layout = document.querySelector('main');
const fps = 12;  //in ms per scroll step, less value - smoother animation
function scrollAnimate(elem, style, unit, from, to, time, prop) {
if (!elem) {
return;
}
var start = new Date().getTime(),
timer = setInterval(function () {
var step = Math.min(1, (new Date().getTime() - start) / time);
var value =  (from + step * (to - from)) + unit;
if (prop) {
elem[style] = value;
} else {
elem.style[style] = value;
}
if (step === 1) {
clearInterval(timer);
}
}, fps);
if (prop) {
elem[style] = from + unit;
} else {
elem.style[style] = from + unit;
}
}
function scrollTo(hash) {
const target = document.getElementById(hash);
const from = window.location.hash.substring(1) || 'start';
const offsetFrom = document.getElementById(from).offsetTop;
const offsetTo = target.offsetTop;
scrollAnimate(layout,
"scrollTop", "", offsetFrom, offsetTo, animationDuration, true);
setTimeout(function () {
window.location.hash = hash;
}, animationDuration+25)
};
//add scroll when click on menu items 
var menu_items = document.querySelectorAll('a.mdl-navigation__link');
menu_items.forEach(function (elem) {
elem.addEventListener("click",
function (e) {
e.preventDefault();
scrollTo(elem.getAttribute('href').substring(1));
});
});
//scroll when open link with anchor 
window.onload = function () {
if (window.location.hash) {
var target = document.getElementById(window.location.hash.substring(1));
scrollAnimate(layout, "scrollTop", "", 0, target.offsetTop, animationDuration, true);
}
}

Pour toute personne en 2019,
tout d'abord, vous ajoutez un écouteur d'événement

  document.getElementById('id').addEventListener('click', () => scrollTo())

puis vous la cible de l'élément et aller en douceur pour qu'il

function scrollTo() {
let target = document.getElementById('target');
target.scrollIntoView({
behavior: "smooth", 
block: "end", 
inline: "nearest"
})
}