Lisse de défilement de l'ancre des liens SANS jQuery
est-il possible d'utiliser smooth scroll pour ancrer des liens mais sans jQuery ? Je crée un nouveau site et je ne veux pas utiliser jQuery .
9 réponses
en utilisant la fonction d'ici: animation JavaScript et en la modifiant pour modifier une propriété( pas seulement la propriété d'un style), 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);
};
DEMO: https://jsfiddle.net/zpu16nen /
assurez-vous que vous dimensionnez la fenêtre assez petite de sorte qu'Il ya réellement une barre de défilement et peut faire défiler à la 5e div.
et non, il Je n'avais pas besoin de recréer 25% de jQuery.
cela serait évidemment fortement modifié en fonction de ce que votre question signifie réellement (comme quand le hash de fenêtre change, ou quelque chose comme ça).
notez qu'avec jQuery, c'est aussi facile que:
$(document).ready(function () {
$("html, body").animate({
scrollTop: $("#div5").offset().top
}, 2000);
});
DEMO: http://jsfiddle.net/7TAa2/1 /
je dis juste...
prolongeant cette réponse: https://stackoverflow.com/a/8918062/3851798
après avoir défini votre fonction de scrollTo, vous pouvez passer l'élément que vous voulez scrollTo dans la fonction.
function scrollTo(element, to, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
si vous avez un div avec un id = "footer "
<div id="footer" class="categories">…</div>
dans le script que vous exécutez pour scroll, vous pouvez exécuter ceci,
elmnt = document.getElementById("footer");
scrollTo(document.body, elmnt.offsetTop, 600);
et voilà. Défilement lisse sans jQuery. Vous pouvez en fait jouer avec ce code sur la console de votre navigateur et l'ajuster à votre goût.
en fait, il y a une façon plus légère et simple de le faire: https://codepen.io/ugg0t/pen/mqBBBY
function scrollTo(element) {
window.scroll({
behavior: 'smooth',
left: 0,
top: element.offsetTop
});
}
document.getElementById("button").addEventListener('click', () => {
scrollTo(document.getElementById("8"));
});div {
width: 100%;
height: 200px;
background-color: black;
}
div:nth-child(odd) {
background-color: white;
}
button {
position: absolute;
left: 10px;
top: 10px;
}<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> CSS3 avec un sélecteur :target peuvent donner un bon résultat sans aucun piratage JS. 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.
utilisez ceci:
let element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
bibliothèque javascript pure et légère: scroll sur github
dans l'avenir, il pourrait être plus logique d'utiliser la fonctionnalité natif scrollIntoView , mais comme il aurait à être polyfilled dans la plupart des sites de production aujourd'hui en raison du manque de soutien IE, je recommande d'utiliser Zenscroll à la place dans tous les cas.
vous pouvez utiliser cette bibliothèque javascript pour ajouter le défilement lisse à tous vos liens internes. Vous pouvez ajouter la configuration aussi, pour fournir des liens à ignorer. Vous pouvez avoir un aperçu détaillé ici. https://codingninjascodes.github.io/SmoothScrollJs/
Smooth Scroll comportement avec polyfill...
exemple:
document.querySelectorAll('a[href^="#"]').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
});