js實現(xiàn)帶有動畫的返回頂部
本文實例為大家分享了js實現(xiàn)帶有動畫返回頂部的具體代碼，供大家參考，具體內(nèi)容如下
1、滑動鼠標往下滑動，側(cè)邊欄跟著往上移動，當?shù)竭_某一個位置的時候，側(cè)邊欄停止移動；鼠標往上，則側(cè)邊欄往下-停止
2、當鼠標繼續(xù)下滑到某一個位置，“返回頂部”幾個字會彈出此處如果點擊“返回頂部”，則立刻到了頂部
3、到達頂部位置效果
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 就是被卷去頭部的大小 一定要寫到滾動的外面 // 當我們側(cè)邊欄固定定位之后應該變化的數(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’; } // 當?shù)降字黝}區(qū)域的時候,顯示span的內(nèi)容 if (window.pageYOffset >= zhutiTop) {span.style.display = ’block’; } else {span.style.display = ’none’; } }) // 封裝了一個動畫js文件 function animation(obj, target, fn1) { // console.log(fn1); // fn是一個回調(diào)函數(shù)，在定時器結(jié)束的時候添加 // 每次開定時器之前先清除掉定時器 clearInterval(obj.timer); obj.timer = setInterval(function () {// 步長計算公式 越來越小// 步長取整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) } // 獲取返回頂部的事件 點擊觸發(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、喜歡記得點擊，關(guān)注，收藏噢，不喜勿噴~
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備