Ultimate Back To Top
const btn=document.getElementById("backToTop"); const circle=btn.querySelector(".progress-ring"); const circumference=251; let ticking=false; let lastScroll=0; /* 微信浏览器修复 */ if(/MicroMessenger/i.test(navigator.userAgent)){ document.documentElement.style.setProperty("--wechat-fix","40px"); } /* 滚动 */ window.addEventListener("scroll",()=>{ if(!ticking){ requestAnimationFrame(()=>{ let scrollTop=document.documentElement.scrollTop; let height=document.documentElement.scrollHeight- document.documentElement.clientHeight; let percent=scrollTop/height; /* 进度 */ circle.style.strokeDashoffset= circumference-(percent*circumference); /* 颜色 */ let hue=120-(percent*120); document.documentElement .style .setProperty("--energy-hue",hue); let color=`hsl(${hue},90%,55%)`; btn.style.color=color; circle.style.stroke=color; /* 滚动速度 */ let velocity=Math.abs(scrollTop-lastScroll); lastScroll=scrollTop; btn.style.scale=1+Math.min(velocity/300,0.15); /* 显示 */ if(scrollTop>200){ btn.classList.add("show"); }else{ btn.classList.remove("show"); } ticking=false; }); ticking=true; } }); /* ✅ 点击(已修复:一次必回顶) */ btn.addEventListener("click",(e)=>{ e.preventDefault(); e.stopPropagation(); /* 防止连续点击干扰 */ btn.style.pointerEvents="none"; setTimeout(()=>btn.style.pointerEvents="auto",400); /* 立即回顶(关键修复) */ window.scrollTo(0,0); /* 粒子特效 */ for(let i=0;i<28;i++){ let p=document.createElement("div"); p.className="particle"; let size=Math.random()*8+3; p.style.width=size+"px"; p.style.height=size+"px"; let x=(Math.random()-0.5)*140+"px"; let y=(Math.random()-0.5)*140+"px"; p.style.setProperty("--x",x); p.style.setProperty("--y",y); p.style.left="50%"; p.style.top="50%"; p.style.background=`hsl(${Math.random()*360},90%,60%)`; btn.appendChild(p); setTimeout(()=>p.remove(),800); } }); /* 磁吸(仅电脑) */ if(matchMedia("(pointer:fine)").matches){ let tx=0; let ty=0; document.addEventListener("mousemove",e=>{ let rect=btn.getBoundingClientRect(); let x=rect.left+rect.width/2; let y=rect.top+rect.height/2; let dist=Math.hypot(e.clientX-x,e.clientY-y); let dx=0; let dy=0; if(dist<150){ dx=(e.clientX-x)*0.15; dy=(e.clientY-y)*0.15; } tx+=(dx-tx)*0.15; ty+=(dy-ty)*0.15; btn.style.transform= `translate3d(calc(-50% + ${tx}px),${ty}px,0)`; }); }
const audio = document.getElementById("bgm"); function startAudio(){ audio.play(); document.removeEventListener("touchstart", startAudio); document.removeEventListener("click", startAudio); } document.addEventListener("touchstart", startAudio); document.addEventListener("click", startAudio);