[前端外掛] js返回頂部 效果實現
需要 jQuery
參考
css:
#goTop{ position:absolute; display:none; width:50px; height:48px; background:#fff url(static/img/gotop.png) no-repeat 16px 15px; border:solid 1px #f9f9f8;border-radius:6px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);cursor:pointer }#goTop:hover{ height:50px; background-position:16px 16px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.3) }
html:
Javascript:
//返回頂部$(window).scroll(function(){ var sc=$(window).scrollTop(); var rwidth=$(window).width()+$(document).scrollLeft(); var rheight=$(window).height()+$(document).scrollTop(); if(sc>0){ $("#goTop").css("display","block"); $("#goTop").css("left",(rwidth-80)+"px"); $("#goTop").css("top",(rheight-120)+"px"); }else{ $("#goTop").css("display","none"); } }); $("#goTop").click(function(){ $('body,html').animate({scrollTop:0},300); });
作者:萌璐琉璃
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/151/viewspace-2805266/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- [外掛擴充套件]返回頂部ReturnTop外掛套件
- js返回頁面頂部的實現(layui)JSUI
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- 直播軟體搭建,利用原生JS實現回到頂部以及吸頂效果JS
- app直播原始碼,利用原生JS實現回到頂部以及吸頂效果APP原始碼JS
- js之返回網頁頂部JS網頁
- js實現點選回到頂部JS
- 143行js頂部進度條最小外掛-nanobar.js原始碼解析JSNaN原始碼
- Android RecyclerView實現頭部懸浮吸頂效果AndroidView
- chrome瀏覽器頁面獲取繫結返回頂部動畫事件外掛Chrome瀏覽器動畫事件
- 返回頂部寫法
- 實現web置頂效果Web
- 簡單版—返回頂部
- JavaScript返回頂部詳解JavaScript
- 回到頂部效果之加速置頂
- 基於js實現點選按鈕回到頂部JS
- kPagination-純js實現分頁外掛JS
- vue js 獲取滾動距離 以及 返回頂部按鈕VueJS
- 專案常用效果!Flutter仿頭條頂部tab切換實現!Flutter
- js實現打字效果JS
- FCPX外掛 SUGARfx Xflare Mac(真實鏡頭光暈效果外掛)Mac
- Vue開發——實現吸頂效果Vue
- jQuery文字從頂部掉落效果jQuery
- div有滾動條 返回頂部
- 網站返回頂部功能視訊網站
- 原生 JS實現一個簡單分頁外掛JS
- js 外掛JS
- 頂針的 VScode 外掛VSCode
- vue中實現回到頂部功能Vue
- 前端教程之Intro.js輕鬆實現新手引導效果前端JS
- 8 個給前端的頂級 VS Code 擴充套件外掛前端套件
- 混音效果全套外掛
- 智慧混音效果外掛
- PHP外掛系統的實現(七):外掛案例PHP
- CSS + JS 實現打字機效果CSSJS
- js 實現程式碼雨效果JS
- 前端實現文字滾動效果前端
- RecyclerView使用指南(五)—— 實現吸頂效果View