js向下滾動一段距離出現返回頂部按鈕
很多返回頂部效果程式碼,並不是一開始就顯示返回頂部的按鈕,而是在下拉滾動一定距離之後才會顯示。
下面就通過程式碼例項介紹一下如何實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0px; padding:0px; } #top_div{ position:fixed; bottom:80px; right:0; display:none; } #antzone{ width:20px; height:1500px; margin:0px auto; background:green; } </style> <script> window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); if( t >= 300 ) { top_div.style.display = "inline"; } else { top_div.style.display = "none"; } } </script> </head> <body> <div id="top_div"> <a href="#top">返回頂部</a> </div> <div id="antzone"></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onscroll = function(){ },註冊onscroll事件處理函式,也就是當滾動滾動條的時候會觸發此事件。
(2).var t = document.documentElement.scrollTop || document.body.scrollTop,獲取向上滾動的尺寸。
(3).var top_div = document.getElementById( "top_div" ),獲取指定的元素物件。
(4).if( t >= 300 ) {
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
},如果尺寸大於等於300,那麼就顯示返回頂部按鈕,否則隱藏。
二.相關閱讀:
(1).onscroll事件可以參閱javascript scroll事件一章節。
(2).document.documentElement.scrollTop || document.body.scrollTop可以參閱document.documentElement.scrollTop瀏覽器相容一章節。
相關文章
- vue js 獲取滾動距離 以及 返回頂部按鈕VueJS
- 跟隨滾動條漂浮的返回頂部按鈕效果
- 如何獲取向下滾動的距離
- jQuery返回頂部按鈕詳解jQuery
- div有滾動條 返回頂部
- 基於js實現點選按鈕回到頂部JS
- JavaScript 元素距離視窗頂部的距離JavaScript
- RecyclerView滑動到底部的時候點選按鈕直接返回頂部View
- jQuery獲取div距離視窗頂部或者父元素頂部的距離jQuery
- js返回頂部JS
- JavaScript獲取元素距離文件頂部的距離JavaScript
- 拖動滾動條一定距離可以固定於頂部的導航欄
- javascript獲取元素距離網頁頂部的距離JavaScript網頁
- 按鈕滾動條效果
- 回到頂部和回到頂部按鈕的顯示隱藏
- [前端外掛] js返回頂部 效果實現前端JS
- js返回頁面頂部的實現(layui)JSUI
- 直播軟體搭建,點選按鈕自動回到頂部
- 原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離JS瀏覽器
- js之返回網頁頂部JS網頁
- vscode開啟關閉編輯區域頂部固定區域 頂部有一段行數距離高度 StickyScrollVSCode
- CSS_導航欄+固定浮動的回到頂部按鈕CSS
- unity 實現輪盤方式的按鈕滾動效果Unity
- Dcat-admin新增頂部右側按鈕
- list滾動條向下
- 懸浮按鈕點選回到頂部FloatingActionButton
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- 左右帶有按鈕圖片水平滾動
- 滾動到頂部踩坑記錄
- scrollable滾動條向下滾動至底部
- 手機直播原始碼,點選按鈕,立即回到頂部原始碼
- 一種統計ListView滾動距離的方法View
- jquery實現返回頁面頂部功能。jQuery
- 從頁面底部回到頂部+動畫效果 & 翻頁後從按鈕處回到頁面頂部動畫
- 如何判斷滾動是否滾動到了網頁底部或者頂部網頁
- iOS UITableView上下滑動控制底部按鈕出現iOSUIView
- vue專案tween方法實現返回頂部Vue
- JavaScript 點選按鈕返回底部JavaScript