资讯专栏INFORMATION COLUMN

前端实例练习 - 回到顶部

王陆宽 / 3089人阅读

摘要:回到顶部代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。

回到顶部

代码储存在Github
效果预览

初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。

效果预览

HTML 部分

HTML

万维网上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

CSS 部分
.container {
    width: 60%;
    margin: 0 auto;
    height: 5000px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  animation: 0.8s fade; 
}

@keyframes fade {
    from {opacity: 0};
    to {opacity: 1};
}

#myBtn:hover {
  background-color: #555;
}
JavaScript 部分
(function() {
    var myBtn = document.getElementById("myBtn");
    
    /*判断滚轮位置*/
    function scrollCheck() {
        if(document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    function goToTop() {
        /*延时上升*/
        var loop = setInterval(function(){
            /*浏览器兼容*/
            var body = document.body || document.documentElement;
            body.scrollTop -= 30;
            if(body.scrollTop == 0) {
                clearInterval(loop);
            }
        }, 1);
    }

    /*滚动时执行*/
    window.onscroll = function() {
        scrollCheck();
    }

    myBtn.onclick = function() {
        goToTop();
    }
})();

好啦,现在所有的代码都写完啦!

赶快打开浏览器,看看效果吧!

在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!

参考自w3cschools

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82006.html

相关文章

  • 前端实例练习 - 回到顶部

    摘要:回到顶部代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 回到顶部 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材...

    hedzr 评论0 收藏0
  • 前端实例练习 - 回到顶部

    摘要:回到顶部代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 回到顶部 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材...

    andong777 评论0 收藏0
  • 前端实例练习 - 模态框

    摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...

    xiaotianyi 评论0 收藏0
  • 前端实例练习 - 模态框

    摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...

    CODING 评论0 收藏0
  • 前端实例练习 - 模态框

    摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...

    caige 评论0 收藏0

发表评论

0条评论

王陆宽

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<