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

您的位置:首頁技術文章
文章詳情頁

js實現帶有動畫的返回頂部

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

本文實例為大家分享了js實現帶有動畫返回頂部的具體代碼,供大家參考,具體內容如下

1、滑動鼠標往下滑動,側邊欄跟著往上移動,當到達某一個位置的時候,側邊欄停止移動;鼠標往上,則側邊欄往下-停止

js實現帶有動畫的返回頂部

2、當鼠標繼續下滑到某一個位置,“返回頂部”幾個字會彈出此處如果點擊“返回頂部”,則立刻到了頂部

js實現帶有動畫的返回頂部

3、到達頂部位置效果

js實現帶有動畫的返回頂部

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; } /* 內容區域樣式 */ .banner { height: 450px; background-color: red } /* sidebar是側邊欄 */ .sidebar { position: absolute; top: 300px; right: 250px; display: inline-block; width: 40px; height: 80px; background-color: cyan; text-align: center; } /* 側邊欄 “返回頂部”字體 */ .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'>頭部區域</div> <div class='banner w'>banner區域</div> <div class='zhuti w'>主體區域</div> <div class='footer w'>尾部區域</div> <script> // Js代碼部分 var sidebar = document.querySelector(’.sidebar’) var banner = document.querySelector(’.banner’) var bannerTop = banner.offsetTop; // 獲取 主體 區域的事件源 var zhuti = document.querySelector(’.zhuti’); var span = document.querySelector(’span’); var zhutiTop = zhuti.offsetTop; // console.log(bannerTop) // 200 // banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動的外面 // 當我們側邊欄固定定位之后應該變化的數值 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’; } // 當到底主題區域的時候,顯示span的內容 if (window.pageYOffset >= zhutiTop) {span.style.display = ’block’; } else {span.style.display = ’none’; } }) // 封裝了一個動畫js文件 function animation(obj, target, fn1) { // console.log(fn1); // fn是一個回調函數,在定時器結束的時候添加 // 每次開定時器之前先清除掉定時器 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存在,調用fn if (fn1) { fn1(); }} else { // 每30毫秒就將新的值給obj.left window.scroll(0, obj.pageYOffset + step);} }, 30) } // 獲取返回頂部的事件 點擊觸發 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、喜歡記得點擊,關注,收藏噢,不喜勿噴~

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 亚克力制品定制,上海嘉定有机玻璃加工制作生产厂家—官网 | 塑料脸盆批发,塑料盆生产厂家,临沂塑料广告盆,临沂家用塑料盆-临沂市永顺塑业 | 2-羟基泽兰内酯-乙酰蒲公英萜醇-甘草查尔酮A-上海纯优生物科技有限公司 | 金联宇电缆总代理-金联宇集团-广东金联宇电缆实业有限公司 | 地磅-地秤-江阴/无锡地磅-江阴天亿计量设备有限公司_ | 杭州画室_十大画室_白墙画室_杭州美术培训_国美附中培训_附中考前培训_升学率高的画室_美术中考集训美术高考集训基地 | 吸污车_吸粪车_抽粪车_电动三轮吸粪车_真空吸污车_高压清洗吸污车-远大汽车制造有限公司 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 行吊_电动单梁起重机_双梁起重机_合肥起重机_厂家_合肥市神雕起重机械有限公司 | 山东风淋室_201/304不锈钢风淋室净化设备厂家-盛之源风淋室厂家 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 空冷器|空气冷却器|空水冷却器-无锡赛迪森机械有限公司[官网] | 企业管理培训,企业培训公开课,企业内训课程,企业培训师 - 名课堂企业管理培训网 | 北京亦庄厂房出租_经开区产业园招商信息平台| 加盟店-品牌招商加盟-创业项目商机平台 | 上海小程序开发-小程序制作-上海小程序定制开发公司-微信商城小程序-上海咏熠 | 清管器,管道清管器,聚氨酯发泡球,清管球 - 承德嘉拓设备 | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | 飞歌臭氧发生器厂家_水处理臭氧发生器_十大臭氧消毒机品牌 | 大_小鼠elisa试剂盒-植物_人Elisa试剂盒-PCR荧光定量试剂盒-上海一研生物科技有限公司 | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | LNG鹤管_内浮盘价格,上装鹤管,装车撬厂家-连云港赛威特机械 | 皮带机-带式输送机价格-固定式胶带机生产厂家-河南坤威机械 | 寮步纸箱厂_东莞纸箱厂 _东莞纸箱加工厂-东莞市寮步恒辉纸制品厂 | 油冷式_微型_TDY电动滚筒_外装_外置式电动滚筒厂家-淄博秉泓机械有限公司 | 玻璃瓶厂家_酱菜瓶厂家_饮料瓶厂家_酒瓶厂家_玻璃杯厂家_徐州东明玻璃制品有限公司 | 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) | 立式硫化罐-劳保用品硫化罐-厂家直销-山东鑫泰鑫硫化罐厂家 | 脱硫搅拌器厂家-淄博友胜不锈钢搅拌器厂家 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | 西门子气候补偿器,锅炉气候补偿器-陕西沃信机电工程有限公司 | 济南电缆桥架|山东桥架-济南航丰实业有限公司 | 氧化铁红厂家-淄博宗昂化工| 北京百度网站优化|北京网站建设公司-百谷网络科技 | 体视显微镜_荧光生物显微镜_显微镜报价-微仪光电生命科学显微镜有限公司 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 无线联网门锁|校园联网门锁|学校智能门锁|公租房智能门锁|保障房管理系统-KEENZY中科易安 | 洗瓶机厂家-酒瓶玻璃瓶冲瓶机-瓶子烘干机-封口旋盖压盖打塞机_青州惠联灌装机械 |