js實(shí)現(xiàn)帶有動(dòng)畫的返回頂部
本文實(shí)例為大家分享了js實(shí)現(xiàn)帶有動(dòng)畫返回頂部的具體代碼，供大家參考，具體內(nèi)容如下
1、滑動(dòng)鼠標(biāo)往下滑動(dòng)，側(cè)邊欄跟著往上移動(dòng)，當(dāng)?shù)竭_(dá)某一個(gè)位置的時(shí)候，側(cè)邊欄停止移動(dòng)；鼠標(biāo)往上，則側(cè)邊欄往下-停止
2、當(dāng)鼠標(biāo)繼續(xù)下滑到某一個(gè)位置，“返回頂部”幾個(gè)字會(huì)彈出此處如果點(diǎn)擊“返回頂部”，則立刻到了頂部
3、到達(dá)頂部位置效果
4、源代碼
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; } /* 版心 */ .w { width: 980px; margin: 0 auto; } /* 頭部樣式 */ .head { height: 200px; background-color: teal; } /* 內(nèi)容區(qū)域樣式 */ .banner { height: 450px; background-color: red } /* sidebar是側(cè)邊欄 */ .sidebar { position: absolute; top: 300px; right: 250px; display: inline-block; width: 40px; height: 80px; background-color: cyan; text-align: center; } /* 側(cè)邊欄 “返回頂部”字體 */ .sidebar span { display: none; font-size: 14px; cursor: pointer; } /* 主體div樣式 */ .zhuti { height: 300px; background-color: violet; } /* 底部樣式 */ .footer { height: 700px; background-color: yellow; } </style></head><body> <div class='sidebar'>廣告<br><br> <span id='returns'>返回頂部</span> </div> <div class='head w'>頭部區(qū)域</div> <div class='banner w'>banner區(qū)域</div> <div class='zhuti w'>主體區(qū)域</div> <div class='footer w'>尾部區(qū)域</div> <script> // Js代碼部分 var sidebar = document.querySelector(’.sidebar’) var banner = document.querySelector(’.banner’) var bannerTop = banner.offsetTop; // 獲取 主體 區(qū)域的事件源 var zhuti = document.querySelector(’.zhuti’); var span = document.querySelector(’span’); var zhutiTop = zhuti.offsetTop; // console.log(bannerTop) // 200 // banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動(dòng)的外面 // 當(dāng)我們側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值 var sidebarTop = sidebar.offsetTop - bannerTop; document.addEventListener(’scroll’, function () { // console.log(window.pageYOffset) if (window.pageYOffset >= bannerTop) {sidebar.style.position = ’fixed’;sidebar.style.top = sidebarTop + ’px’; } else {sidebar.style.position = ’absolute’;sidebar.style.top = 300 + ’px’; } // 當(dāng)?shù)降字黝}區(qū)域的時(shí)候,顯示span的內(nèi)容 if (window.pageYOffset >= zhutiTop) {span.style.display = ’block’; } else {span.style.display = ’none’; } }) // 封裝了一個(gè)動(dòng)畫js文件 function animation(obj, target, fn1) { // console.log(fn1); // fn是一個(gè)回調(diào)函數(shù)，在定時(shí)器結(jié)束的時(shí)候添加 // 每次開定時(shí)器之前先清除掉定時(shí)器 clearInterval(obj.timer); obj.timer = setInterval(function () {// 步長計(jì)算公式 越來越小// 步長取整var step = (target - obj.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.pageYOffset == target) { clearInterval(obj.timer); // 如果fn1存在，調(diào)用fn if (fn1) { fn1(); }} else { // 每30毫秒就將新的值給obj.left window.scroll(0, obj.pageYOffset + step);} }, 30) } // 獲取返回頂部的事件 點(diǎn)擊觸發(fā) var returns = document.querySelector(’#returns’); returns.addEventListener(’click’, function () { // alert(111); // window.scroll(x,y) 可以返回頂部 // window.scroll(0,0); animation(window, 0) }) </script></body></html>
5、喜歡記得點(diǎn)擊，關(guān)注，收藏噢，不喜勿噴~
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python excel和yaml文件的讀取封裝2. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決3. python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊4. Python內(nèi)存映射文件讀寫方式5. php實(shí)現(xiàn)當(dāng)前用戶在線人數(shù)6. Android中的緩存7. Android Studio插件8. .net6 在中標(biāo)麒麟下的安裝和部署過程9. Java CountDownLatch應(yīng)用場(chǎng)景代碼實(shí)例10. Python中內(nèi)建模塊collections如何使用
網(wǎng)公網(wǎng)安備