ATTENTION Les dernières versions du brillant Google Chrome plantent à cause de ce script!! Résultat, les ancres (#ancre) ne fonctionne pas bien voir pas du tout. Notez que je n’ai aucun problème avec Firefox. Les forums sont remplis de messages et de webmestres aux abois, mais aucune solution ne semble régler ce problème de taille! Alors, éviter à tout prix ce script, car malheureusement le pisteur Google Chrome (que je déteste) est largement le navigateur le plus utilisé dans le monde...
Toute fois, le CSS3 a maintenant une instruction qui fait précisément la même chose sans une ligne de JavaScript !
html {
scroll-behavior: smooth;
}
Malgré son côté accessoire, esthétique, c’est un effet que je trouve ergonomique. La transition plus naturelle (personne ne tourne les pages d’un livre en un clin d’oeil!) permet de suivre la navigation sans perdre le fil, sans choque neural. La concentration reste fluide.
Je n’ai fait que traduire intégralement le code jQuery en pur JavaScript. Passer les hyperliens de la page en revue pour leur ajouter la capture de l’événement « click » sans jQuery ne date pas d’hier. Ce qui n’est pas le cas de l’animation, plus difficile à reproduite.
Ici il n’est pas question de nouvelles animations ou de transitions CSS3 mais bien de pur JavaScript et plus précisément le classique « compteur » ou « timer » avec setTimeout pour défiler jusqu’en haut ...petit à petit, laissant l’impression d’un glissement doux. Un code assez répandu par ailleurs. Mais je suis tombé sur un petit script de Forestrf qui calcul pour nous plusieurs effets de transition. J’ai donc combiné les deux scripts.
Exemple avec le bouton retour en haut
Copier ce code dans votre document HTML :
<script>
// Par Oznog, trucsweg.com
// http://trucsweb.com/tutoriels/javascript/defilement_doux
document.addEventListener('DOMContentLoaded', function() {
var aLiens = document.querySelectorAll('a[href*="#"]');
for(var i=0, len = aLiens.length; i<len; i++) {
aLiens[i].onclick = function () {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = this.getAttribute("href").slice(1);
if (target.length) {
scrollTo(document.getElementById(target).offsetTop, 1000);
return false;
}
}
};
}
});
//Exemple de : Forestrf
// http://jsfiddle.net/forestrf/tPQSv/2/
function scrollTo(element, duration) {
var e = document.documentElement;
if(e.scrollTop===0){
var t = e.scrollTop;
++e.scrollTop;
e = t+1===e.scrollTop--?e:document.body;
}
scrollToC(e, e.scrollTop, element, duration);
}
function scrollToC(element, from, to, duration) {
if (duration < 0) return;
if(typeof from === "object")from=from.offsetTop;
if(typeof to === "object")to=to.offsetTop;
scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}
function scrollToX(element, x1, x2, t, v, step, operacion) {
if (t < 0 || t > 1 || v <= 0) return;
element.scrollTop = x1 - (x1-x2)*operacion(t);
t += v * step;
setTimeout(function() {
scrollToX(element, x1, x2, t, v, step, operacion);
}, step);
}
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
</script>
Toutes les fonctions Forestrf
function linearTween(t){
return t;
}
function easeInQuad(t){
return t*t;
}
function easeOutQuad(t){
return -t*(t-2);
}
function easeInOutQuad(t){
t/=0.5;
if(t<1)return t*t/2;
t--;
return (t*(t-2)-1)/2;
}
function easeInCuaic(t){
return t*t*t;
}
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
function easeInOutCuaic(t){
t/=0.5;
if(t<1)return t*t*t/2;
t-=2;
return (t*t*t+2)/2;
}
function easeInQuart(t){
return t*t*t*t;
}
function easeOutQuart(t){
t--;
return -(t*t*t*t-1);
}
function easeInOutQuart(t){
t/=0.5;
if(t<1)return 0.5*t*t*t*t;
t-=2;
return -(t*t*t*t-2)/2;
}
function easeInQuint(t){
return t*t*t*t*t;
}
function easeOutQuint(t){
t--;
return t*t*t*t*t+1;
}
function easeInOutQuint(t){
t/=0.5;
if(t<1)return t*t*t*t*t/2;
t-=2;
return (t*t*t*t*t+2)/2;
}
function easeInSine(t){
return -Mathf.Cos(t/(Mathf.PI/2))+1;
}
function easeOutSine(t){
return Mathf.Sin(t/(Mathf.PI/2));
}
function easeInOutSine(t){
return -(Mathf.Cos(Mathf.PI*t)-1)/2;
}
function easeInExpo(t){
return Mathf.Pow(2,10*(t-1));
}
function easeOutExpo(t){
return -Mathf.Pow(2,-10*t)+1;
}
function easeInOutExpo(t){
t/=0.5;
if(t<1)return Mathf.Pow(2,10*(t-1))/2;
t--;
return (-Mathf.Pow(2,-10*t)+2)/2;
}
function easeInCirc(t){
return -Mathf.Sqrt(1-t*t)-1;
}
function easeOutCirc(t){
t--;
return Mathf.Sqrt(1-t*t);
}
function easeInOutCirc(t){
t/=0.5;
if(t<1)return -(Mathf.Sqrt(1-t*t)-1)/2;
t-=2;
return (Mathf.Sqrt(1-t*t)+1)/2;
}
Pour aller encore plus loin dans les effets et les animations sans jquery, voir les fonctions « Easing » de Robert Penner’s
Équivalent jQuery
Ceci n’enlève en rien au jQuery, indispensable en d’autre circonstance. Vaut mieux alors garder la même philosophie. Tout le monde connait d’ailleurs le script « Smooth Scrolling » disponible sur CSS-Tricks.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/documents/images/2016/dan_sorensen_sailing_stones_at_racetrack_playa_death_valley_national_park.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2015/retourenhaut.png)
![[Photo]](http://www.trucsweb.com/documents/images/2015/tri.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2015/sans-jquery.jpg)
AbuseIPDB
Connexion