Javascript 如果用户没有';在5秒钟内没有滚动?

Javascript 如果用户没有';在5秒钟内没有滚动?,javascript,delay,scrollto,anchor-scroll,Javascript,Delay,Scrollto,Anchor Scroll,基本上,由于我在stackoverflow上已经找到了一个解决方案,我已经在5秒钟后创建了一个平滑的滚动到锚点 我似乎无法添加的一点是,如果用户在5秒内还没有滚动,那么只有使用此触发器,因为这可能是一种令人不快的体验 我尝试过以各种不同的方式添加.scrollTo(),并将其包装到另一个函数中,但除了对Javascript的基本理解和调整之外,我并没有太多的知识 任何帮助都将不胜感激 <script type="text/javascript"> /*<![CDATA[*/

基本上,由于我在stackoverflow上已经找到了一个解决方案,我已经在5秒钟后创建了一个平滑的滚动到锚点

我似乎无法添加的一点是,如果用户在5秒内还没有滚动,那么只有使用此触发器,因为这可能是一种令人不快的体验

我尝试过以各种不同的方式添加.scrollTo(),并将其包装到另一个函数中,但除了对Javascript的基本理解和调整之外,我并没有太多的知识

任何帮助都将不胜感激

<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>

/*0?ms:1000);
}
},
动画:函数(o、f、t、srt、mS){
清除超时(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)){
滚动到(x,y);
}
如果(毫秒)*/
回答:

非常感谢@Byte仓鼠

此代码将在5000ms后平滑地将用户滚动到ID标记,但如果用户已经开始滚动,则不会触发:

<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>

var ZxCTO={
滚动:功能(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];
如果(a){
this.animate(this,s,this.pos(a),new Date(),typeof(ms)='number'&&ms>0?ms:1000);
}
},
动画:函数(o、f、t、srt、mS){
清除超时(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)){
滚动到(x,y);
}
如果(ms
//设置一个在用户滚动时立即更改的变量:
var wascrolled=false;
window.onscroll=函数(){
wascrolled=true;
}
//在通过Javascript实际滚动之前,请检查页面是否手动滚动:
函数doSmoothScrollToAnchor(){
if(wascrolled==false){
警报(“未滚动”);
}否则{
警报(“用户手动滚动”);
}
}
设置超时(doSmoothScrollToAnchor,3000);
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
//设置一个在用户滚动时立即更改的变量:
var wascrolled=false;
window.onscroll=函数(){
wascrolled=true;
}
//在通过Javascript实际滚动之前,请检查页面是否手动滚动:
函数doSmoothScrollToAnchor(){
if(wascrolled==false){
警报(“未滚动”);
}否则{
警报(“用户手动滚动”);
}
}
设置超时(doSmoothScrollToAnchor,3000);
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
Text
Text
Text
Text
Text
Text
Text
Text
Text
试试
clearTimeout()
函数。它会清除计时器并再次设置,使其重新启动:)

var timer=setTimeout(doSmoothScrollToAnchor,5000);
var scrolled=false;
var ZxCTO={
滚动:功能(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];
如果(a){
this.animate(this,s,this.pos(a),new Date(),typeof(ms)='number'&&ms>0?ms:1000);
}
},
动画:函数(o、f、t、srt、mS){
清除超时(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)){
滚动到(x,y);
}
如果(ms尝试
clearTimeout()
函数。它会清除计时器并再次设置,以便重新启动:)

var timer=setTimeout(doSmoothScrollToAnchor,5000);
var scrolled=false;
var ZxCTO={
滚动:功能(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];
如果(a){
this.animate(this,s,this.pos(a),new Date(),typeof(ms)='number'&&ms>0?ms:1000);
}
},
动画:函数(o、f、t、srt、mS){
清除超时(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)){
滚动到(x,y);
}

如果(微软:你为什么要这么做?只要说用户没有滚动,但正在阅读屏幕上的内容就行了?如果页面在屏幕上滚动,那就很烦人了own@RRR,页面的结构在折叠上方具有视觉美感,主要内容在折叠下方。与常规相反,这很好。延迟后的卷轴只是为了过渡在加载页面后,用户在大约5秒钟后开始阅读内容,这是真正需要的所有时间来阅读页面上方的内容。如果用户已经向下滚动或已经开始滚动,我不希望触发自动滚动。在这种情况下,5秒钟后,您应该检查
滚动是否感谢@RRR,这正是我的本意试着去做,但我正在努力适应它。请检查下面的提琴…对不起,不能使用你的例子,但我已经在类似的行上创建了它…只需等待3秒钟,页面就会滚动。你为什么需要这样做?只需说,如果用户没有滚动,但正在阅读屏幕上的内容?如果页面滚动,它会令人恼火它在它的上面own@RRR,该页面已构建为具有上述视觉美感