因此,基本上,由于我已经在stackoverflow上找到了解决方案,因此我可以在5秒后创建平滑滚动到锚点。
我似乎无法补充的一点是,如果用户在5秒钟内还没有滚动,则仅触发此ONLY,因为这可能会令人不快。
我尝试过尝试以各种不同的方式添加.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 />
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句