如果用户在 5 秒内未滚动,如何平滑滚动到定位点
How to smooth scroll to an anchor if a user hasn't scrolled in 5 seconds?
所以基本上,多亏了我已经在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>
希望它对:)有所帮助
编辑我读到您希望它是一次性事件,所以我更改了我的代码
相关文章:
- Safari(Mac OS)上的jQuery平滑滚动问题
- jquery平滑滚动问题
- javascript mootools平滑滚动'x'像素数量
- jQuery平滑滚动
- jQuery平滑滚动未滚动
- 更新Wordpress和我的平滑滚动停止工作
- 具有子菜单和平滑滚动的粘性导航
- 平滑滚动&懒惰
- 平滑滚动时更改 ID 的颜色
- 使用 jQuery 在滚动时平滑过渡图像
- 使用我的基于标签的平滑滚动脚本而不带“a”的解决方案
- 调整平滑滚动代码
- 使用 window.scrollBy) 平滑滚动
- 平滑滚动代码
- 如何在ng视图中进行页面渲染后的平滑滚动
- 如何使用requestAnimationFrame实现平滑滚动
- 如何由于浏览器的平滑滚动而忽略大量滚动事件
- Javascript-使用鼠标滚轮进行平滑视差滚动
- 使用普通JavaScript平滑滚动到元素
- 平滑滚动并突出显示导航问题