如果用户在 5 秒内没有滚动,如何平滑滚动到锚点?
How to smooth scroll to an anchor if a user hasn't scrolled in 5 seconds?
所以基本上,多亏了我已经在 Whosebug 上找到的解决方案,我已经能够在 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>
希望对您有所帮助:)
编辑 我听说你希望它是一次性事件,所以我修改了我的代码
所以基本上,多亏了我已经在 Whosebug 上找到的解决方案,我已经能够在 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>
希望对您有所帮助:)
编辑 我听说你希望它是一次性事件,所以我修改了我的代码