前端实例练习-返回顶部
时间：2023-03-30 19:01:18
CSS
返回顶部代码存放在Github效果预览初衷：很多人刚接触前端的时候都会问，“前端怎么入门？“，我对目前网上的“入门级”教材不是很满意。在学习一门新知识时，例子尤为重要。这里我整理一下当前页面常用功能实现的具体例子。希望能为您提供一些帮助。希望与大家分享，共同进步。效果预览HTML部分
HTML
万维网上的超媒体文档称为页面（外文：page）。作为组织或个人，在万维网上放置起点的页面称为主页（外文：Homepage）或首页。主页通常包含指向其他相关页面或其他节点的指针（超链接）。所谓超链接是一种统一资源定位符（UniformResourceLocator，外文简称：URL）指针，通过激活（点击）它，浏览器可以方便地获取新的网页。这是HTML被广泛使用的最重要原因之一。在逻辑上被视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超文本标记语言（HyperTextMarkupLanguage，缩写：HTML）是一种为“创建可以在网络浏览器中查看的网页和其他信息”而设计的标记语言。网页的本质是超文本标记语言，结合其他网络技术（如：脚本语言、通用网关接口、组件等）可以创建功能强大的网页。因此，超文本标记语言是万维网（Web）编程的基础，也就是说，万维网是建立在超文本的基础上的。超文本标记语言之所以称为超文本标记语言，是因为文本中包含所谓的“超链接”点。
返回顶部 CSSpart.container{width:60%;保证金：0自动；高度：5000像素；}#myBtn{显示：无；位置：固定；底部：20px；右：30px；z-指数：99；-半径：10px；动画：0.8s淡入淡出；}@keyframes从{opacity:0}淡出{;to{opacity:1};}#myBtn:hover{background-color:#555;}JavaScriptpart(function(){varmyBtn=document.getElementById("myBtn");/*判断滚轮位置*/functionscrollCheck(){if(document.body.scrollTop>20||document.documentElement.scrollTop>20){document.getElementById("myBtn").style.display="block";}else{document.getElementById("myBtn").style.display="none";}}functiongoToTop(){/*向上延长时间*/varloop=setInterval(function(){/*浏览器兼容*/varbody=document.body||文档.文档元素；body.scrollTop-=30;如果（body.scrollTop==0）{clearInterval（循环）；}},1);}/*滚动时执行*/window.onscroll=function(){scrollCheck();}myBtn.onclick=function(){goToTop();}})();好了，现在所有的代码都写好了！赶紧打开浏览器看看效果吧！在这里，只是给大家提供一个思路，具体实现可以参考一下，每个人可以有不同的方法。请快快发挥你的想象力，把你最想在电脑上实现的功能打出来吧！来自w3cschools的参考
