Comment faire défiler en douceur vers une ancre si un utilisateur n'a pas défilé dans 5 secondes?

Question

Donc, fondamentalement, grâce à une solution que j'ai déjà trouvée sur stackoverflow, j'ai réussi à créer un défilement lisse vers une ancre après 5 secondes.

Le bit que je ne peux pas ajouter à ceci est simplement d'avoir ce déclenchement SEULEMENT si un utilisateur n'a pas déjà défilé dans les 5 secondes car cela peut être une expérience irritante.

J'ai essayé d'ajouter .scrollTo() de différentes façons et de les intégrer dans une autre fonction, mais en dehors de la compréhension de base et de l'ajustement de Javascript, je n'ai pas vraiment de connaissances.

Toute aide serait grandement appréciée.

<script type="text/javascript"> 
/*<![CDATA[*/ 

var zxcScrollTo={ 

Scroll:function(o){ 
    var a=document.getElementById(o.AnchorID),ms=o.Animate,s=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop]; 
    if (a){ 
    this.animate(this,s,this.pos(a),new Date(),typeof(ms)=='number'&&ms>0?ms:1000); 
    } 
}, 

animate:function(o,f,t,srt,mS){ 
    clearTimeout(o.to); 
    var ms=new Date()-srt,x=(t[0]-f[0])/mS*ms+f[0],y=(t[1]-f[1])/mS*ms+f[1]; 
    if (isFinite(x)&&isFinite(y)){ 
    window.scrollTo(x,y); 
    } 
    if (ms<mS){ 
    o.to=setTimeout(function(){ o.animate(o,f,t,srt,mS); },10); 
    } 
    else { 
    window.scrollTo(t[0],t[1]); 
    } 
}, 

pos:function(obj){ 
    var rtn=[0,0]; 
    while(obj){ 
    rtn[0]+=obj.offsetLeft; 
    rtn[1]+=obj.offsetTop; 
    obj=obj.offsetParent; 
    } 
    return rtn; 
} 


} 
setTimeout(function(){ 
    zxcScrollTo.Scroll({ 
    AnchorID:'anchor', 
    Animate:2000 
    }); 
},5000); 

/*]]>*/ 
</script> 

RÉPONSE:

Un grand merci à @ByteHamster.

Ce code utilisateur de défilement lisse à une étiquette d'identification après 5000ms mais ne déclenche pas si l'utilisateur a déjà commencé à défiler:

<script type="text/javascript"> 

var zxcScrollTo={ 

Scroll:function(o){ 
    var a=document.getElementById(o.AnchorID),ms=o.Animate,s=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop]; 
    if (a){ 
    this.animate(this,s,this.pos(a),new Date(),typeof(ms)=='number'&&ms>0?ms:1000); 
    } 
}, 

animate:function(o,f,t,srt,mS){ 
    clearTimeout(o.to); 
    var ms=new Date()-srt,x=(t[0]-f[0])/mS*ms+f[0],y=(t[1]-f[1])/mS*ms+f[1]; 
    if (isFinite(x)&&isFinite(y)){ 
    window.scrollTo(x,y); 
    } 
    if (ms<mS){ 
    o.to=setTimeout(function(){ o.animate(o,f,t,srt,mS); },10); 
    } 
    else { 
    window.scrollTo(t[0],t[1]); 
    } 
}, 

pos:function(obj){ 
    var rtn=[0,0]; 
    while(obj){ 
    rtn[0]+=obj.offsetLeft; 
    rtn[1]+=obj.offsetTop; 
    obj=obj.offsetParent; 
    } 
    return rtn; 
} 


} 

var wasScrolled = false; 

window.onscroll = function() { 
    wasScrolled = true; 

} 

function doSmoothScrollToAnchor() { 
    if (wasScrolled === false) { 
     zxcScrollTo.Scroll({ 
      AnchorID: 'anchor', 
      Animate: 2000 
     }); 
    } 
} 

setTimeout(doSmoothScrollToAnchor, 5000); 


</script> 

Answer 1

// Set a variable that gets changed as soon as the user scrolls: 
 
var wasScrolled = false; 
 
window.onscroll = function() { 
 
    wasScrolled = true; 
 
} 
 

 
// Before actually scrolling via Javascript, check if the page was scrolled manually: 
 
function doSmoothScrollToAnchor() { 
 
    if(wasScrolled === false) { 
 
     alert("Was not scrolled"); 
 
    } else { 
 
     alert("The user scrolled manually"); 
 
    } 
 
} 
 
setTimeout(doSmoothScrollToAnchor, 3000);

Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br /> 
 
Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br /> 
 
Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br /> 
 
Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />

Answer 2

Essayez la fonction clearTimeout(). Il efface la minuterie et il définit à nouveau pour qu'il recommence :)

var timer = setTimeout(doSmoothScrollToAnchor, 5000); 
 
var scrolled = false; 
 
var zxcScrollTo={ 
 

 
Scroll:function(o){ 
 
    var a=document.getElementById(o.AnchorID),ms=o.Animate,s=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop]; 
 
    if (a){ 
 
    this.animate(this,s,this.pos(a),new Date(),typeof(ms)=='number'&&ms>0?ms:1000); 
 
    } 
 
}, 
 

 
animate:function(o,f,t,srt,mS){ 
 
    clearTimeout(o.to); 
 
    var ms=new Date()-srt,x=(t[0]-f[0])/mS*ms+f[0],y=(t[1]-f[1])/mS*ms+f[1]; 
 
    if (isFinite(x)&&isFinite(y)){ 
 
    window.scrollTo(x,y); 
 
    } 
 
    if (ms<mS){ 
 
    o.to=setTimeout(function(){ o.animate(o,f,t,srt,mS); },10); 
 
    } 
 
    else { 
 
    window.scrollTo(t[0],t[1]); 
 
    } 
 
}, 
 

 
pos:function(obj){ 
 
    var rtn=[0,0]; 
 
    while(obj){ 
 
    rtn[0]+=obj.offsetLeft; 
 
    rtn[1]+=obj.offsetTop; 
 
    obj=obj.offsetParent; 
 
    } 
 
    return rtn; 
 
} 
 

 

 
} 
 
function doSmoothScrollToAnchor() { 
 
     zxcScrollTo.Scroll({ 
 
      AnchorID: 'anchor', 
 
      Animate: 2000 
 
     }); 
 
     scrolled = true; 
 
} 
 
window.onscroll = function(e){ 
 
    if(!scrolled){ 
 
\t clearInterval(timer); 
 
    } 
 
}

#div1 { 
 
    width: 100%; 
 
    height: 650px; 
 
    background-color: #444; 
 
} 
 
#anchor{ 
 
    width: 100%; 
 
    height: 650px; 
 
    background-color: red; 
 
} 
 
#div3{ 
 
    width: 100%; 
 
    height: 650px; 
 
    background-color: blue; 
 
} 
 
#div4{ 
 
    width: 100%; 
 
    height: 650px; 
 
    background-color: green; 
 
}

<div id="div1"> 
 
</div> 
 
<div id="anchor"> 
 
</div> 
 
<div id="div3"> 
 
</div> 
 
<div id="div4"> 
 
</div>

Espoir il a aidé :)

EDIT Je lis que tu voulais que ce soit un un événement de temps, donc j'ai modifié mon code