js 做返回顶部效果

js 做返回顶部效果涉及的知识点: font-awesome字体图标;使用的cdn。 window.onload窗口加载完成事件;如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中;即等待窗口加载完成之后再执行! window.onscroll窗口滚动事件 窗口滚动的距离      document.documentEleme…

大家好,又见面了,我是你们的朋友全栈君。

涉及的知识点:

  1. font-awesome字体图标;使用的cdn。

  2. window.onload 窗口加载完成事件;如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中;即等待窗口加载完成之后再执行!

  3. window.onscroll 窗口滚动事件

  4. 窗口滚动的距离

          document.documentElement.scrollTop   ==>>  非IE滚动的距离

          document.body.scrollTop  ==>>  IE滚动的距离

     5. 定时器 setInterval 做返回顶部的动画效果

     6. 清除定时器

 

实现步骤:

  1. 注册窗口滚动事件

  2. 滚动离顶部的距离大于300时,显示ICON

  3. 注册点击事件,返回顶部 ==>> 即设置scrollTop 的值为0

  4. 用定时器做返回顶部的滚动效果

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>返回顶部效果</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #returnTop{
            position: fixed;
            right: 50px;
            bottom: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            // 1.注册窗口滚动事件
            window.onscroll = function(){
                // 找到返回顶部的ICON
                var returnTopICON = document.getElementById("returnTop");
                //非IE滚动的距离
                //console.log(document.documentElement.scrollTop);
                //IE滚动的距离
                //console.log(document.body.scrollTop);

                // Math.max 取非IE和IE两个滚动距离的最大值
                var scrollDistance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
                // 2. 滚动离顶部的距离大于300时,显示ICON
                if(scrollDistance > 300){
                    returnTopICON.style.display = 'block';
                }else{
                    returnTopICON.style.display = 'none';
                }
            }

            //3. 注册点击事件,返回顶部 ==>> 即设置scrollTop 的值为0
            var returnTopICON = document.getElementById("returnTop");
            returnTopICON.onclick = function(){
                // 直接设置为0,是没有过渡效果的
                // document.documentElement.scrollTop = 0;
                // document.body.scrollTop = 0;

                // 4. 用定时器做返回顶部的滚动效果
                var dsj = setInterval(function(){
                    var distance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
                    distance -= 80;
                    if(distance <= 0){          
                        //如果滚动的距离 <= 0 时,清除掉定时器,否则点击图标滚动到顶部后,不能往下拉,一拉就又滚动到顶部
                        clearInterval(dsj);
                    }else{
                        document.documentElement.scrollTop = distance;
                        document.body.scrollTop = distance;
                    }                    
                },40);

            }
        }
    </script>
</head>
<body>
    <div style="background: firebrick;height: 500px;">

    </div>
    <div style="height: 2000px;background: gainsboro">
        <p id="returnTop" style="display: none">
            <i class="fa fa-chevron-up fa-3x"></i>
        </p>
    </div>    
</body>
</html>

 

效果:

js 做返回顶部效果

 

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158404.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Redis介绍——Linux环境Redis安装全过程和遇到的问题及解决方案

    Redis介绍——Linux环境Redis安装全过程和遇到的问题及解决方案

  • 浅谈MFCC

    MFCC(Mel-frequencycepstralcoefficients):梅尔频率倒谱系数。梅尔频率是基于人耳听觉特性提出来的,它与Hz频率成非线性对应关系。梅尔频率倒谱系数(MFCC)则是利用它们之间的这种关系,计算得到的Hz频谱特征。主要用于语音数据特征提取和降低运算维度。例如:对于一帧有512维(采样点)数据,经过MFCC后可以提取出最重要的40维(一般而言)数据同时也达到了将维

  • intellij idea快捷键大全_idea中快捷键

    intellij idea快捷键大全_idea中快捷键最常用代码结构优化Ctrl+Alt+L:格式化代码Ctrl+Alt+I:将选中的代码进行自动缩进编排,这个功能在编辑JSP文件时也可以工作Ctrl+Alt+O:优化导入的类和包(去掉无用的import语句)Ctrl+/或Ctrl+Shift+/:注释(//或者/**/)Ctrl+Shift+J:两行合成一行,删去不必要的空格匹配代码格式跳转定位Ctrl+Alt+B:跳转到方…

  • readprocessmemory函数库_read_csv函数

    readprocessmemory函数库_read_csv函数ReadProcessMemory函数ReadProcessMemory函数功能描述:该函数用来读取指定进程的空间的数据,此空间必须是可以访问的,否则读取操作会失败!函数原型BOOLReadProcessMemory(HANDLEhProcess,//目标进程句柄LPCVOIDlpBaseAddress,//读取数据的起始地址LPVOIDlpBuffer,//存放数据的缓存区地址DW…

  • Nginx面试题(总结最全面的面试题!!!)

    Nginx面试题(总结最全面的面试题!!!)文章目录什么是Nginx?为什么要用Nginx?为什么Nginx性能这么高?Nginx怎么处理请求的?什么是正向代理和反向代理?使用“反向代理服务器的优点是什么?Nginx的优缺点?Nginx应用场景?Nginx目录结构有哪些?Nginx配置文件nginx.conf有哪些属性模块?Nginx静态资源?如何用Nginx解决前端跨域问题?Nginx虚拟主机怎么配置?基于虚拟主机配置域名基于端口的虚拟主…

  • vmware 15.5.7 激活码【中文破解版】

    (vmware 15.5.7 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/ide…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号