【前端动手玩创意】置顶按钮，老梗经典｜带你的网页搭电梯(12)

目录

【前端动手玩创意】等待的转圈圈效果 (1)

【前端动手玩创意】google五星评分的星星(2)

【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)

【前端动手玩创意】一句CSS做出好看的hero section！(4)

【前端动手玩创意】创造一个Skill bar(5)

【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)

【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)

【前端动手玩创意】让你的PDF档案更难被抓取(8)

【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)

【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)

前情提要

每个人写网页都一定会有一些重複的老梗，就算是2023年了，也躲不掉的那种。
放心，我说的不是nav-bar这种东西，
而是稍微又更有趣一点的小工具，也就是每个人回家都几乎要经历的一个小空间：「电梯」

没错！就是拥有电梯效果的置顶按钮！

点下去就能够跳到网页的最上面，就像是我们回家的电梯，对吧？

置顶按钮效果(back to the top button)

原理解说

其实只是做出一个fixed的按钮，然后使用JS设定，藉由scrollTop的API就可以达成了！

程式码内容

html的部分

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

CSS的部分

#myBtn {  display: none; /* Hidden by default */  position: fixed; /* Fixed/sticky position */  bottom: 20px; /* Place the button at the bottom of the page */  right: 30px; /* Place the button 30px from the right */  z-index: 99; /* Make sure it does not overlap */  border: none; /* Remove borders */  outline: none; /* Remove outline */  background-color: red; /* Set a background color */  color: white; /* Text color */  cursor: pointer; /* Add a mouse pointer on hover */  padding: 15px; /* Some padding */  border-radius: 10px; /* Rounded corners */  font-size: 18px; /* Increase font size */}#myBtn:hover {  background-color: #555; /* Add a dark-grey background on hover */}

JS部分

// Get the button:let mybutton = document.getElementById("myBtn");// When the user scrolls down 20px from the top of the document, show the buttonwindow.onscroll = function() {scrollFunction()};function scrollFunction() {  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {    mybutton.style.display = "block";  } else {    mybutton.style.display = "none";  }}// When the user clicks on the button, scroll to the top of the documentfunction topFunction() {  document.body.scrollTop = 0; // For Safari  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera}

心得后记

今天玩的是很基础的东西，虽然老梗，但是经典。
经典就是无法避免，因此就算拿来练习也不为过，所谓的进阶也只是基础的招数重覆与变化。
就像爱因斯坦说：专家是训练有素的狗。
也像是李小龙说的：不怕练一万招，只怕一招练一万次。

我们不需要把太简单的东西视为无聊，可以用另一种心态去面对，
就彷彿蜘蛛人穿越新宇宙，另一个世界的自己，也许是另一种新的境界与心境。
学会去面对、接受，就是成长的开始！(๑•ั็ω•็ั๑)