如果用户在 5 秒内未滚动,如何平滑滚动到定位点

How to smooth scroll to an anchor if a user hasn't scrolled in 5 seconds?

本文关键字:滚动 平滑 定位 何平滑 用户 如果      更新时间:2023-09-26

所以基本上,多亏了我已经在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>

答:

非常感谢@ByteHamster。

此代码将在 5000 毫秒后将用户平滑滚动到 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>

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

试试clearTimeout()函数。它清除计时器并再次设置它,以便它重新开始:)

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

希望它对:)有所帮助

编辑我读到您希望它是一次性事件,所以我更改了我的代码