滚动到页面顶部的多种实现

时间：2023-04-04 23:25:04 HTML5

鏈枃宸叉暣鐞嗗埌Github锛屽湴鍧€馃憠鍗氬銆傚鏋滄垜鐨勫唴瀹瑰浣犳湁甯姪锛屾杩庣偣涓猄tar馃帀馃帀馃帀榧撳姳:)~~甯屾湜鎴戠殑鍐呭鑳藉府鍒颁綘銆傜洰鍓嶆垜涓撴敞浜庡墠绔紝浣嗘垜涔熶細鍦ㄦ湁闄愮殑鏃堕棿鍐呭垎浜垜鐨勬墍瑙佹墍闂汇€傞敋鐐瑰拰骞虫粦婊氬姩鍦?html>鍏冪礌涓婃彁渚涗竴涓寚鍚慖D

璺宠浆鍒伴〉闈㈤《閮?/a>鐨勯摼鎺ワ紝鎴戜滑鍙互浣跨敤鏈€鏂扮殑scroll-behavior灞炴€у疄鐜癈SS骞虫粦婊氬姩html{scroll-behavior:smooth;}鏌ョ湅鏁堟灉scrollTo,scrollBy,scrollIntoVi鎴戜滑鍏堝湪鏍硅妭鐐规坊鍔爏croll-behavior灞炴€у疄鐜癈SS骞虫粦婊氬姩html{scroll-behavior锛氬厜婊戠殑;鎺ヤ笅鏉ワ紝缁欐寜閽坊鍔犱竴涓偣鍑讳簨浠讹紝鍦ㄤ换浣曞湴鏂逛娇鐢╯crollTo銆乻crollBy鎴杝crollIntoViwe鏂规硶婊氬姩鍒伴《閮ㄣ€俉indow.scrollTo()婊氬姩鍒版枃妗ｄ腑鐨勫潗鏍囥€侲lem.scrollTo()鏂规硶鍙互浣跨晫闈㈡粴鍔ㄥ埌缁欏畾鍏冪礌鐨勬寚瀹氬潗鏍囦綅缃€倃indow.scrollTo(0,0)document.documentElement.scrollTo(0,0)Window.scrollBy()鍦ㄧ獥鍙ｅ唴鎸夋寚瀹氱殑鍋忕Щ閲忔粴鍔ㄦ枃妗ｃ€侲lem.scrollBy()鏂规硶浣垮厓绱犳粴鍔ㄦ寚瀹氱殑璺濈銆倃indow.scrollBy(0,-10000)document.documentElement.scrollBy(0,-10000)Window.scroll()灏嗙獥鍙ｆ粴鍔ㄥ埌鏂囨。涓殑鐗瑰畾浣嶇疆銆侲lem.scroll()鏂规硶鐢ㄤ簬婊氬姩鍒扮粰瀹氬厓绱犲唴鐨勭壒瀹氬潗鏍囥€倃indow.scroll(0,0)document.documentElement.scroll(0,0)Elem.scrollIntoViwe(top)灏嗘粴鍔ㄩ〉闈互浣縀lem鍙銆倀op=true锛堥粯璁ゅ€硷級锛岄〉闈㈡粴鍔ㄤ互渚縀lem鍑虹幇鍦ㄧ獥鍙ｉ《閮ㄣ€傚厓绱犵殑涓婅竟缂樺皢涓庣獥鍙ｇ殑椤堕儴瀵归綈銆倀op=false锛岄〉闈㈡粴鍔紝浣縀lem鍑虹幇鍦ㄧ獥鍙ｅ簳閮ㄣ€傚厓绱犵殑搴曢儴杈圭紭灏嗕笌绐楀彛搴曢儴瀵归綈銆俤ocument.documentElement.scrollIntoView()鏌ョ湅鏁堟灉妫€娴嬫粴鍔ㄤ綅缃細scroll浜嬩欢浣跨敤document.documentElement杩斿洖鏂囨。鐨勬牴鍏冪礌锛屾垜浠渶瑕佸畠鏉ヨ幏鍙栧亸绉诲€煎湪鎸夐挳涓婃坊鍔犱竴涓偣鍑讳簨浠剁洃鍚櫒銆傚湪scrollToTop鍑芥暟鍐呴儴锛屼娇鐢╯crollTo鏂规硶灏嗗叾婊氬姩鍒板睆骞曢《閮ㄣ€俢onstscrollToTopBtn=document.querySelector('.scrollToTopBtn')constrootElement=document.documentElementconstscrollToTop=()=>{rootElement.scrollTo({top:0,behavior:'smooth'})}scrollToTopBtn.addEventListener('鐐瑰嚮scrollToTop)涓嬩竴姝ユ槸鏄剧ず鎸夐挳锛屾垜浠彲浠ヤ娇鐢ㄦ粴鍔ㄤ簨浠朵睛鍚櫒鏉ユ娴嬫粴鍔ㄣ€傛瘡娆＄敤鎴锋粴鍔ㄦ椂閮戒細璋冪敤handleScroll鍑芥暟銆傜幇鍦紝鎴戜滑闇€瑕佸彲浠ユ粴鍔ㄧ殑鍍忕礌鎬绘暟銆侲lement.scrollHeight鍙灞炴€с€傜粰鍑哄厓绱犵殑鍐呭楂樺害锛屽寘鎷敱浜庢孩鍑鸿€屼笉鍙鐨勯儴鍒嗐€侲lement.clientHeight鍙灞炴€с€傜粰鍑哄厓绱犵殑鍐呴儴楂樺害锛堜互鍍忕礌涓哄崟浣嶏級锛屽嵆鍙閮ㄥ垎鐨勯珮搴︼紝鍖呮嫭濉厖锛屼絾涓嶅寘鎷按骞虫粴鍔ㄦ潯銆佽竟妗嗗拰杈硅窛銆俧unctionhandleScroll(){constscrollTotal=rootElement.scrollHeight-rootElement.clientHeightif(rootElement.scrollTop/scrollTotal>0.8){scrollToTopBtn.classList.add('showBtn')}else{scrollToTopBtn.classList.remove('show')Btn}document.addEventListener('scroll',handleScroll)鏌ョ湅鏁堟灉IntersectionObserverAPIIntersectionObserverAPI鎻愪緵浜嗕竴绉嶅紓姝ヨ瀵熺洰鏍囧厓绱犱笌绁栧厛鍏冪礌鎴栭《绾ф枃妗ｇ殑瑙嗗彛浜ら泦鍙樺寲鐨勬柟娉曘€傜浉杈冧簬涓婁竴鑺傜殑scroll浜嬩欢鐩戝惉婊氬姩锛孖ntersectionObserverAPI鏄В鍐虫绫婚棶棰樼殑缁濅匠鏂规銆傝繖鏄竴涓浉褰撴柊鐨勬祻瑙堝櫒API锛屽厑璁稿紑鍙戜汉鍛樹互鏇翠紭鍖栫殑鏂瑰紡灏嗗ぇ閮ㄥ垎浠诲姟鍗歌浇鍒版祻瑙堝櫒銆俢onsttarget=document.querySelector('footer')constscrollToTopBtn=document.querySelector('.scrollToTopBtn')constrootElement=document.documentElement//涓€鏃﹂〉鑴氳繘鍏ユ垨绂诲紑瑙嗗彛锛屽皢娣诲姞鎴栧垹闄ょ被銆傚洖璋冩帴鏀舵潯鐩暟缁勪綔涓哄弬鏁般€俧unctioncallback(entries,observer){entries.forEach((entry)=>{if(entry.isIntersecting){scrollToTopBtn.classList.add('showBtn')}else{scrollToTopBtn.classList.remove('showBtn')}})}constobserver=newIntersectionObserver(callback)observer.observe(target)functionscrollToTop(){rootElement.scrollTo({top:0,behavior:'smooth'})}scrollToTopBtn.addEventListener('click',scrollToTop)鏌ョ湅鏁堟灉requestAnimationFramesetanimationwindow.requestAnimationFrame()鍛婅瘔娴忚鍣ㄤ綘瑕佹墽琛屼竴涓姩鐢伙紝瑕佹眰娴忚鍣ㄥ湪涓嬫閲嶇粯鍓嶈皟鐢ㄦ寚瀹氱殑鍥炶皟鍑芥暟鏉ユ洿鏂板姩鐢汇€傝鏂规硶闇€瑕佷紶鍏ヤ竴涓洖璋冨嚱鏁颁綔涓哄弬鏁帮紝鍥炶皟鍑芥暟浼氬湪涓嬫娴忚鍣ㄩ噸缁樺墠鎵ц銆侲lement.scrollTop灞炴€у彲浠ヨ幏鍙栨垨璁剧疆鍏冪礌鍐呭鍨傜洿婊氬姩鐨勫儚绱犳暟銆備娇鐢╳indow.requestAnimationFrame()鍔ㄧ敾婊氬姩銆俢onstscrollToTop=()=>{constc=document.documentElement.scrollTop||document.body.scrollTopif(c>0){window.requestAnimationFrame(scrollToTop)window.scrollTo(0,c-c/8)}}鏌ョ湅鏁堟灉

上一篇：Angular的contentprojectioncontentprojectionbasedoncustominstructions单步调试

下一篇：网页兼容性

滚动到页面顶部的多种实现相关文章