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

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

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

瀏覽:122日期: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
相關文章:
主站蜘蛛池模板: ORP控制器_ORP电极价格-上优泰百科 | 室内室外厚型|超薄型|非膨胀型钢结构防火涂料_隧道专用防火涂料厂家|电话|价格|批发|施工 | 自动气象站_农业气象站_超声波气象站_防爆气象站-山东万象环境科技有限公司 | 木材烘干机,木炭烘干机,纸管/佛香烘干设备-河南蓝天机械制造有限公司 | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | NM-02立式吸污机_ZHCS-02软轴刷_二合一吸刷软轴刷-厦门地坤科技有限公司 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 西安标准厂房_陕西工业厂房_西咸新区独栋厂房_长信科技产业园官方网站 | 电磁铁_推拉电磁铁_机械手电磁吸盘电磁铁厂家-广州思德隆电子公司 | 托盘租赁_塑料托盘租赁_托盘出租_栈板出租_青岛托盘租赁-优胜必达 | 顺辉瓷砖-大国品牌-中国顺辉| 订做不锈钢_不锈钢定做加工厂_不锈钢非标定制-重庆侨峰金属加工厂 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 雷冲击高压发生器-水内冷直流高压发生器-串联谐振分压器-武汉特高压电力科技有限公司 | 暴风影音| 称重传感器,测力传感器,拉压力传感器,压力变送器,扭矩传感器,南京凯基特电气有限公司 | 船用泵,船用离心泵,船用喷射泵,泰州隆华船舶设备有限公司 | 户外健身路径_小区健身器材_室外健身器材厂家_价格-浩然体育 | 胶辊硫化罐_胶鞋硫化罐_硫化罐厂家-山东鑫泰鑫智能装备有限公司 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 上海橡胶接头_弹簧减震器_金属软接头厂家-上海淞江集团 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 山东钢衬塑罐_管道_反应釜厂家-淄博富邦滚塑防腐设备科技有限公司 | 购买舔盐、舔砖、矿物质盐压块机,鱼饵、鱼饲料压块机--请到杜甫机械 | 福州时代广告制作装饰有限公司-福州广告公司广告牌制作,福州展厅文化墙广告设计, | 电缆隧道在线监测-智慧配电站房-升压站在线监测-江苏久创电气科技有限公司 | 冷却塔厂家_冷却塔维修_冷却塔改造_凉水塔配件填料公司- 广东康明节能空调有限公司 | 电动手术床,医用护理床,led手术无影灯-曲阜明辉医疗设备有限公司 | 回转支承-转盘轴承-回转驱动生产厂家-洛阳隆达轴承有限公司 | 青州开防盗门锁-配汽车芯片钥匙-保险箱钥匙-吉祥修锁店 | 西宁装修_西宁装修公司-西宁业之峰装饰-青海业之峰墅级装饰设计公司【官网】 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 物联网卡_物联网卡购买平台_移动物联网卡办理_移动联通电信流量卡通信模组采购平台? | 探鸣起名网-品牌起名-英文商标起名-公司命名-企业取名包满意 | 环保袋,无纺布袋,无纺布打孔袋,保温袋,环保袋定制,环保袋厂家,环雅包装-十七年环保袋定制厂家 | 大行程影像测量仪-探针型影像测量仪-增强型影像测量仪|首丰百科 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | HEYL硬度计量泵-荧光法在线溶解氧仪-净时测控技术(上海)有限公司 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | 风化石头制砂机_方解石制砂机_瓷砖石子制砂机_华盛铭厂家 |