點選返回頂部效果實現程式碼詳解
本章節詳細分享一段程式碼例項,它實現了點選按鈕可以平滑返回網頁頂部的效果。
這樣的效果在實際應用中非常的廣泛,可能實現的策略有不少,下面就分享一個比較簡單的一種。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0px; padding:0px; } body { height:1500px; } #top{ width:50px; height:50px; background:green; position:fixed; right:10px; bottom:50px; display:none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 200) { $("#top").css("display", "block"); }else { $("#top").css("display", "none"); } }) $("#top").click(function () { $("body,html").animate({ scrollTop: 0 }, 500); }) }) </script> </head> <body> <div id="top"></div> </body> </html>
上面的程式碼實現了我們需要的功能,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function () {},當文件內容完全載入完畢再去執行函式匯中的程式碼。
(2).$(window).scroll(function () {}),註冊scroll事件處理函式,也就是滾動視窗滾動條時會觸發此事件。
(3).if ($(this).scrollTop() > 200) {
$("#top").css("display", "block");
}else {
$("#top").css("display", "none");
},當向下滾動超過200px,那麼就顯示返回頂部按鈕,否則隱藏。
(4).$("#top").click(function () {
$("body,html").animate({
scrollTop: 0
}, 500);
}),點選按鈕可以返回頂部。
二.相關閱讀:
(1).scroll事件可以參閱jQuery scroll事件一章節。
(2).scrollTop()可以參閱jQuery scrollTop()一章節。
(3).css()可以參閱jQuery css()一章節。
(4).animate()可以參閱jQuery animate()一章節。
相關文章
- [前端外掛] js返回頂部 效果實現前端JS
- JavaScript返回頂部詳解JavaScript
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- js實現點選回到頂部JS
- 簡單實現點選回到頂部
- app直播原始碼,利用原生JS實現回到頂部以及吸頂效果APP原始碼JS
- js返回頁面頂部的實現(layui)JSUI
- 基於js實現點選按鈕回到頂部JS
- 點選回到頂部
- jQuery頂部帶有選項卡的焦點圖效果jQuery
- mui裡點選input框是為什麼會返回頂部UI
- JavaScript點選按鈕返回底部詳解JavaScript
- Android RecyclerView實現頭部懸浮吸頂效果AndroidView
- 返回頂部寫法
- 直播軟體搭建,利用原生JS實現回到頂部以及吸頂效果JS
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- 實現web置頂效果Web
- 簡單版—返回頂部
- 一行程式碼搞定使用LinearLayoutManager一鍵返回頂部行程
- JavaScript彈幕效果程式碼詳解JavaScript
- 手機直播原始碼,點選按鈕,立即回到頂部原始碼
- 回到頂部效果之加速置頂
- 短視訊直播原始碼,實現頂部導航欄背景圖片漸隱漸現效果原始碼
- jQuery點選滑出層效果程式碼例項jQuery
- js之返回網頁頂部JS網頁
- js 實現程式碼雨效果JS
- android短影片開發,點選兩次實現不同點選效果的實現方式Android
- 專案常用效果!Flutter仿頭條頂部tab切換實現!Flutter
- Vue開發——實現吸頂效果Vue
- 網站返回頂部功能視訊網站
- div有滾動條 返回頂部
- jQuery文字從頂部掉落效果jQuery
- 使用CSS實現逼真的水波紋點選效果CSS
- SVG點選實現動態放大的圓效果SVG
- webpack4 SplitChunks實現程式碼分隔詳解Web
- vue中實現回到頂部功能Vue
- Jquery實現的高亮效果程式碼分享jQuery
- 實現dcat-admin的雙選單風格( 頂部+左側)
- jQuery tab選項卡程式碼詳解jQuery