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. 《笨方法学Python》加分题17

    题目通过前学习的文件操作把一个文件中的内容拷贝到另一个文件中,并使用 os.path.exists 在拷贝前判断被拷贝的文件是否已经存在,之后由用户判断是否继续完成拷贝. 新知识os.path.exi ...

  2. linux学习第十五天 (Linux就该这么学) 找到一本不错的Linux电子书，附《Linux就该这么学》章节目录

    今天收尾DNS内容复习了,还有分享解析配置,都没有记,主要访问同一个域名,就近访问,

  3. python 数据可视化 -- 真实数据的噪声平滑处理

    平滑数据噪声的一个简单朴素的做法是,对窗口(样本)求平均,然后仅仅绘制出给定窗口的平均值,而不是所有的数据点. import matplotlib.pyplot as plt import numpy ...

  4. Sum of Subsequence Widths LT891

    Given an array of integers A, consider all non-empty subsequences of A. For any sequence S, let the  ...

  5. nodeJS接入微信公众平台开发

    一.写在前面的话   Node.js是一个开放源代码.跨平台的JavaScript语言运行环境,采用Google开发的V8运行代码,使用事件驱动.非阻塞和异步输入输出模型等技术来提高性能,可优化应用程 ...

  6. openstack镜像制作centos7

    1,找一台宿主机安装kvm并检查是否支持虚拟化,这里我用的是vmware来做宿主机 egrep '(vmx|svm)' /proc/cpuinfo 然后安装kvm: yum install epel- ...

  7. php发送http put/patch/delete请求Demo

    CURL请求对于PHPer是必备技能,使用curl_opt函数来发送各式各样的http请求动作,不仅限于get和post.在测试自己的restful api的时候,通过访问这个代理发送http put ...

  8. ELK的文档搭建

    一.安装elasticsearch 官网:https://www.elastic.co/guide/index.html https://www.elastic.co/guide/en/elastic ...

  9. day 34

    1 .内容回顾 #__author : 'liuyang' #date : 2019/4/17 0017 上午 9:01 # 利大于弊,则做之 # 会死于斯,则不去 # 2个 人 晚上 5个题 面试题 ...

  10. python基础--------字符串的调用详解（2）

    Python 字符串的的调用方法~~~@@@ 17.  strip  : 去除字符串左右两边指定的字符 18.   rstrip : 去除字符串右边指定的字符 19 .   lstrip  :  去除 ...