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. vue项目中编写一个图片预览的公用组件

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...

  2. awk命令小结

    先在此至敬朱双印老师,博客写得很详细:http://www.zsythink.net/archives/tag/awk/ 这是朱双印老师关于awk博客的链接,强力推荐给大家   AWK一般在网上说是一 ...

  3. 结对项目——四则运算GUI项目

    一.项目地址:https://git.coding.net/lvgx/wsz.git 二.PSP: PSP2.1 任务内容 计划共完成需要的时间(min) 实际完成需要的时间(min) Plannin ...

  4. CAS SSO单点登录实例

    1.因为是本地模拟sso环境,而sso的环境测试需要域名,所以需要虚拟几个域名出来,步骤如下: 2.进入目录C:\Windows\System32\drivers\etc 3.修改hosts文件 12 ...

  5. [C#.net]SQL参数传入空值报错解决方案

    C#中的null与SQL中的NULL是不一样的,SQL中的NULL用C#表示出来就是DBNull.Value. 注意:SQL参数是不能接受C#的null值的,传入null就会报错. SqlComman ...

  6. 移动端 去除onclick点击事件出现的背景色框

    这个特效是实现在移动端点击某个地方的时候,比如说按钮或者超链接的时候,系统会默认加上一些灰色的背景和一些高亮的效果.但是有的时候我们并不想要这些效果.并且希望点击的时候实现神不知鬼不觉的感觉,,这个时 ...

  7. mysql-5.7.17-winx64 的安装配置

    在Mysql中下载 解压后,没有安装,需要设置环境变量,设置my.ini配置 设置环境变量 操作如下: 1)右键单击我的电脑->属性->高级系统设置(高级)->环境变量      点 ...

  8. Java————迷宫问题

    它表示一个迷宫,其中的1表示墙壁,0表示可以走的路,只能横着走或竖着走,不能斜着走,要求编程序找出从左上角到右下角的最短路线. package algorithm_java; import java. ...

  9. 解决mysql for docker容器报错：Authentication plugin 'caching_sha2_password' cannot be loaded

    为图方便,懒得在mac上安装mysql了,一个是管理不方便,第二个是为了方便多机器同步开发环境.就使用docker安装了. 拉取mysql镜像 docker pull mysql 运行mysql实例 ...

  10. Logback简单使用

    1.     添加jar包/maven配置 <dependency> <groupId>ch.qos.logback</groupId> <artifactI ...