一区二区三区中文国产亚洲_另类视频区第一页_日韩精品免费视频_女人免费视频_国产综合精品久久亚洲

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  行業(yè)資訊  > JavaScript全解析——案例-回到頂部

JavaScript全解析——案例-回到頂部

來(lái)源:千鋒教育
發(fā)布人:zyh
時(shí)間: 2023-06-02 10:18:00 1685672280
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0;
}

body {
height: 3000px;
}

.header {
width: 100%;
height: 40px;
background-color: skyblue;
font-size: 30px;
text-align: center;
position: fixed;
top: -40px;
/* top: 0; */
left: 0;
/* display: none; */

transition: top 0.5s linear;
}

.go {
width: 50px;
height: 50px;
background-color: yellow;
font-size: 20px;
line-height: 25px;
text-align: center;
position: fixed;
bottom: 80px;
right: 80px;
display: none;
}
</style>
</head>

<body>
<div id="header" class="header">頂部通欄</div>
<div id="go" class="go">返回頂部</div>

<script>
/*
需求 隨著滾動(dòng)條決定 頂部通欄 和 回到頂部 按鈕的顯示和隱藏
分析:
=> 要隨著滾動(dòng)條的滾動(dòng) 就要有一個(gè)滾動(dòng)條的滾動(dòng)事件了
=> 當(dāng)滾動(dòng)條的滾動(dòng)的時(shí)候卷去的高度大于等于300的時(shí)候顯示
=> 也就是小于300的時(shí)候是隱藏的
*/



//實(shí)現(xiàn)
window.onscroll = function () {
// console.log(111);
// 獲取頁(yè)面卷去的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 判斷頁(yè)面卷去的高度是多少根據(jù)值的不同設(shè)置顯示還是隱藏
if (scrollTop >= 300) {
header.style.display = 'block'
go.style.display = 'block'
} else {
header.style.display = 'none'
go.style.display = 'none'
}
}

// 有效果的實(shí)現(xiàn)
window.onscroll = function () {
// console.log(111);
// 獲取頁(yè)面卷去的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 判斷頁(yè)面卷去的高度是多少根據(jù)值的不同設(shè)置顯示還是隱藏
console.log(scrollTop);
if (scrollTop >= 300) {
header.style.top = '0'
go.style.display = 'block'
} else {
header.style.top = '-40px'
go.style.display = 'none'
}
}
</script>
</body>

</html>

tags: JavaScript
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
PMP?認(rèn)證榮獲北京市境外職業(yè)資格認(rèn)可!

北京市人力資源和社會(huì)保障局、北京市人才工作局近日發(fā)布了關(guān)于印發(fā)《北京市境外職業(yè)資格認(rèn)可目錄(3.0版)》的通知,新版目錄境外職業(yè)資格清單...詳情>>

2023-09-07 17:27:00
怎么選擇靠譜的短視頻運(yùn)營(yíng)培訓(xùn)機(jī)構(gòu)?

怎么選擇靠譜的短視頻運(yùn)營(yíng)培訓(xùn)機(jī)構(gòu)?5G時(shí)代的來(lái)臨,短視頻作為新媒體中最為主流的內(nèi)容更加方便用戶(hù)瀏覽觀看信息,因此抖音、快手這類(lèi)的短視頻平...詳情>>

2023-09-07 15:05:06
全媒體短視頻運(yùn)營(yíng)好就業(yè)么?

全媒體短視頻運(yùn)營(yíng)好就業(yè)么?現(xiàn)在學(xué)習(xí)互聯(lián)網(wǎng)運(yùn)營(yíng)可不能只會(huì)單個(gè)的運(yùn)營(yíng)技術(shù),企業(yè)更喜歡全能型人才。如今的互聯(lián)網(wǎng)世界有多種平臺(tái),新媒體、短視頻...詳情>>

2023-09-07 14:49:25
短視頻運(yùn)營(yíng)培訓(xùn)機(jī)構(gòu)有用嗎?

短視頻運(yùn)營(yíng)培訓(xùn)機(jī)構(gòu)有用嗎?短視頻的火熱,催生了一大批的網(wǎng)絡(luò)紅人、網(wǎng)紅賬號(hào),這些短視頻賬號(hào)通過(guò)實(shí)現(xiàn)粉絲流量變現(xiàn),獲得了非常豐厚的收入,自...詳情>>

2023-09-06 13:49:12
大數(shù)據(jù)分析就業(yè)高薪崗位介紹

大數(shù)據(jù)分析就業(yè)高薪崗位介紹?大數(shù)據(jù)行業(yè)是一個(gè)快速發(fā)展的行業(yè),其主要特征是數(shù)據(jù)規(guī)模龐大、種類(lèi)多樣、處理復(fù)雜。目前,大數(shù)據(jù)行業(yè)已經(jīng)成為全球...詳情>>

2023-09-06 13:42:47
開(kāi)班信息
北京校區(qū)
  • 北京校區(qū)
  • 大連校區(qū)
  • 廣州校區(qū)
  • 成都校區(qū)
  • 杭州校區(qū)
  • 長(zhǎng)沙校區(qū)
  • 合肥校區(qū)
  • 南京校區(qū)
  • 上海校區(qū)
  • 深圳校區(qū)
  • 武漢校區(qū)
  • 鄭州校區(qū)
  • 西安校區(qū)
  • 青島校區(qū)
  • 重慶校區(qū)
  • 太原校區(qū)
  • 沈陽(yáng)校區(qū)
  • 南昌校區(qū)
  • 哈爾濱校區(qū)