1

つまり、基本的には、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>
4

2 に答える 2

0 

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

于 2016-02-25T11:33:46.313 に答える