电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

js實(shí)現(xiàn)帶有動畫的返回頂部

瀏覽:123日期:2024-04-26 08:57:35

本文實(shí)例為大家分享了js實(shí)現(xiàn)帶有動畫返回頂部的具體代碼,供大家參考,具體內(nèi)容如下

1、滑動鼠標(biāo)往下滑動,側(cè)邊欄跟著往上移動,當(dāng)?shù)竭_(dá)某一個位置的時候,側(cè)邊欄停止移動;鼠標(biāo)往上,則側(cè)邊欄往下-停止

js實(shí)現(xiàn)帶有動畫的返回頂部

2、當(dāng)鼠標(biāo)繼續(xù)下滑到某一個位置,“返回頂部”幾個字會彈出此處如果點(diǎn)擊“返回頂部”,則立刻到了頂部

js實(shí)現(xiàn)帶有動畫的返回頂部

3、到達(dá)頂部位置效果

js實(shí)現(xiàn)帶有動畫的返回頂部

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)我們側(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ū)域的時候,顯示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 () {// 步長計(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)注,收藏噢,不喜勿噴~

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 小程序开发公司_APP开发多少钱_软件开发定制_微信小程序制作_客户销售管理软件-济南小溪畅流网络科技有限公司 | 透平油真空滤油机-变压器油板框滤油机-滤油车-华之源过滤设备 | 体视显微镜_荧光生物显微镜_显微镜报价-微仪光电生命科学显微镜有限公司 | 工装定制/做厂家/公司_工装订做/制价格/费用-北京圣达信工装 | 浙江皓格药业有限公司| 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 专注提供国外机电设备及配件-工业控制领域一站式服务商-深圳市华联欧国际贸易有限公司 | 电池挤压试验机-自行车喷淋-车辆碾压试验装置-深圳德迈盛测控设备有限公司 | 定坤静电科技静电消除器厂家-除静电设备| 球磨机,节能球磨机价格,水泥球磨机厂家,粉煤灰球磨机-吉宏机械制造有限公司 | 硫化罐_蒸汽硫化罐_大型硫化罐-山东鑫泰鑫智能装备有限公司 | 一体化污水处理设备-一体化净水设备-「山东梦之洁水处理」 | 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 移动机器人产业联盟官网| 【连江县榕彩涂料有限公司】官方网站| 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 耐酸碱胶管_耐腐蚀软管总成_化学品输送软管_漯河利通液压科技耐油耐磨喷砂软管|耐腐蚀化学软管 | 酵素生产厂家_酵素OEM_酵素加盟_酵素ODM_酵素原料厂家_厦门益力康 | 诚暄电子公司首页-线路板打样,pcb线路板打样加工制作厂家 | 今日娱乐圈——影视剧集_八卦娱乐_明星八卦_最新娱乐八卦新闻 | 沥青车辙成型机-车托式混凝土取芯机-混凝土塑料试模|鑫高仪器 | 广州昊至泉水上乐园设备有限公司| 电子元器件呆滞料_元器件临期库存清仓尾料_尾料优选现货采购处理交易商城 | 搜木网 - 木业全产业链交易平台,免费搜货、低价买货! | 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 高空重型升降平台_高空液压举升平台_高空作业平台_移动式升降机-河南华鹰机械设备有限公司 | 水厂污泥地磅|污泥处理地磅厂家|地磅无人值守称重系统升级改造|地磅自动称重系统维修-河南成辉电子科技有限公司 | 网架支座@球铰支座@钢结构支座@成品支座厂家@万向滑动支座_桥兴工程橡胶有限公司 | 购买舔盐、舔砖、矿物质盐压块机,鱼饵、鱼饲料压块机--请到杜甫机械 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 气动调节阀,电动调节阀,自力式压力调节阀,切断阀「厂家」-浙江利沃夫自控阀门 | 喷砂机厂家_自动除锈抛丸机价格-成都泰盛吉自动化喷砂设备 | 天津蒸汽/热水锅炉-电锅炉安装维修直销厂家-天津鑫淼暖通设备有限公司 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 干粉砂浆设备-干粉砂浆生产线-干混-石膏-保温砂浆设备生产线-腻子粉设备厂家-国恒机械 | 在线PH计-氧化锆分析仪-在线浊度仪-在线溶氧仪- 无锡朝达 | 温室大棚建设|水肥一体化|物联网系统 | 施工电梯_齿条货梯_烟囱电梯_物料提升机-河南大诚机械制造有限公司 | 下水道疏通_管道疏通_马桶疏通_附近疏通电话- 立刻通 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 |