index.html

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link herf="index.css">

   </head>

  <body>

        <span id="icon"></span>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <p>我是程序员，平凡有一点理想，渴望让世界不一样！</p>

        <script src="scroll.js"></script>

                <script src="index.js"></script>

       </body>

</html>

index.css

            *{

                padding:;

                margin:;

                border: none;

                list-style: none;

            }

            body{

                background-color: #ddd;

            }

            p{

                text-align: center;

                font-size: 25px;

                margin-bottom: 30px;

            }

            #icon{

                width: 43px;

                height: 43px;

                background: url("./images/to_top.png") no-repeat;

                background-size: 100% 100%;

                position: fixed;

                bottom: 15px;

                right: 20px;

                display: none;

            }

index.js

             window.onload=function(){

                 //定义变量

                 let scroll_top=0;

                 let begin=0,end=0,timer=null;

                 //监听窗口滚动事件

                 window.onscroll=function(){

                     scroll_top=scroll().top;

                     //显示和隐藏

                     scroll_top>0?show($("icon")):hidden($("icon"));

                 }

                 //监听图标的点击事件

                 $("icon").onclick=function(){

                     //清除定时器

                     clearInterval(timer);

                     //开启定时器

                     timer=setInterval(function(){

                        begin+=(end-begin)*0.2;

                        window.scrollTo(0,begin);

                        //判断运动结束条件，清除定时器

                        if(Math.round(begin)===end){

                            clearInterval(timer);

                        }

                     },30);

                 }

             }

             function $(id){

                 return typeof id==="string"?document.getElementById(id):null;

             }

             function show(obj){

                 return obj.style.display="block";

             }

             function hidden(obj){

                 return obj.style.display="none";

             }

scroll.js

function scroll(){

    if(pageYOffset!==null){

        return {

            top:window.pageYOffset,

            left:window.pageXOffset

        }

    }else if(document.compatMode===CSS1Compat){

        return {

            top:document.documentElement.scrollTop,

            left:document.documentElement.scrollLeft

        }

    }

    return {

        top:document.body.scrollTop,

        left:document.body.scrollLeft

    }

}

原生js实现返回顶部特效的更多相关文章

  1. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  2. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

  3. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  4. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  5. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  6. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  7. js网页返回顶部和楼层跳跃的实现原理

    这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.)   说楼层跳跃前,先温习下,一般网页在高度较大时, ...

  8. 【转】用jquery编写动态的返回顶部特效

    jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...

  9. WEB前端--返回顶部特效源码

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

随机推荐

  1. Android学习（四）

    教材学习内容总结 图形和定制视图 硬件加速 Android APILevel14及其以上版本为目标的应用程序来说,硬件加速是默认可用的. 可通过android:hardwareAccelerated= ...

  2. MySQL远程连接问题解决方法

    问题:Host 'XXX' is not allowed to connect to this MySQL server. 原因分析: 1.登录到mysql: 在开始目录下管理员身份运行[MySQL ...

  3. java - Integer、int 、String相互转换总结

    一下子还真记不清这三种数据类型之间的转换方法,所以做个小笔记. public class Test03 { public static void main(String[] args) { //int ...

  4. mysql编译好的简单安装

    .创建mysql用户的账号 useradd mysql .下载mysql编译好的压缩包 .安装mysql yum -y install numactl libaio 安装依赖库 tar -zxvf m ...

  5. Nexus 3 搭建 npm 私服 （windows）

    Nexus 3 搭建 npm 私服备忘 下载与安装 在官网下载Nexus Repository Manager OSS 3.x, 解压至任意位置. 管理员运行 powershell, 切换到 nexu ...

  6. AX_Unit

    UnitConvert::qty(_deliverNow,      salesLine.SalesUnit,      salesLine.inventTable().inventUnitId(), ...

  7. .gitignore语法

    没嘛用 “#”表示注释 “!”表示取消忽略 空行不作匹配 若匹配语句中无“/ ” ,便将其视为一个 glob匹配,如'abc'可以匹配 ' abc' , 'cd/abc' , 'ef/abcde.tx ...

  8. 所有子节点、Procedure、MySQL

    在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. ...

  9. TCP和UDP的优缺点

    TCP: 优点: 全双工的可靠连接,使得发送的数据有序.不重复.无差错.不丢失,提供的是可靠的服务: 提供确认重传机制.流量控制和拥塞控制,保证网络的稳定可靠性: 缺点: 每次通信都要建立连接,占用系 ...

  10. 可遇不可求的Question之Mysql在不重启服务的情况下修改运行时变量篇

    比方说在一些实际生产环境中,想改个MYSQL的配置,但是又不想停止服务重起MYSQL,有什么办法呢?使用SET命令可以做到,请看下面几个例子: 1.设置key_buffer_size的大小为10M. ...