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)
blank

相关推荐

  • sftp端口改了ssh受影响吗_sftp端口号怎么查

    sftp端口改了ssh受影响吗_sftp端口号怎么查1.修改两个配置文件,添加一行vi/etc/ssh/ssh_configport端口号vi/etc/ssh/sshd_configport端口号2.重启sshd服务systemctlrestartsshd

  • IDEA优化配置,提高启动和运行速度[通俗易懂]

    IDEA优化配置,提高启动和运行速度[通俗易懂]IDEA优化配置,提高启动和运行速度IDEA默认启动配置主要考虑低配置用户,参数不高,导致启动慢,然后运行也不流畅,这里我们需要优化下启动和运行配置;找到idea安装的bin目录;D:\ProgramFiles\JetBrains\IntelliJIDEA2017.2.3\bin打开idea.exe.vmoptions这个文件关键的三个参数第一个-Xms是最小启动内存参数第二个-Xmx是最大运行内存参数第三个-XX:ReservedCode…

  • 史上最全运放运算放大器知识讲解[通俗易懂]

    史上最全运放运算放大器知识讲解[通俗易懂]史上最全运放运算放大器知识讲解原文:http://www.sohu.com/a/154282071_755644调节和放大模拟信号,它是用途十分广泛的器件,接入适当的反馈网络,可用作精密的交流和直流放大器、有源滤波器滤波器的供应商、振荡器振荡器的供应商及电压比较器比较器的供应商。其应用领域已经延伸到汽车电子、通信、消费等各个领域,并将在未来技术方面扮演重要角色。运算放大器的分类…

  • WLAN与WIFI的区别[通俗易懂]

    WLAN与WIFI的区别[通俗易懂]WLAN与WIFI的区别WLAN简介:WLAN全称为:WirelessLocalAreaNetworks,中文解释为:无线局域网络,是一种利用射频(RadioFrequencyRF)技术进行据传输的系统,该技术的出现绝不是用来取代有线局域网络,而是用来弥补有线局域网络之不足,以达到网络延伸之目的,使得无线局域网络能利用简单的存取架构让用户透过它,实现无网线、无距离限制的通畅网络。

  • kill命令详解_linux杀死进程kill

    kill命令详解_linux杀死进程kill大多数人对kill命令的理解就是杀死一个进程,而这仅仅是kill的一个功能。Kill的zhenshkill用途是向一个进程发送信号,而杀死一个进程仅仅是其中的一个功能。

    2022年10月25日
  • 阿里云服务器centos 7上安装Apache

    阿里云服务器centos 7上安装Apache阿里云服务器centos 7上安装Apache

发表回复

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

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