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. EasyPR源码剖析（5）：车牌定位之偏斜扭转

    一.简介 通过颜色定位和Sobel算子定位可以计算出一个个的矩形区域,这些区域都是潜在车牌区域,但是在进行SVM判别是否是车牌之前,还需要进行一定的处理.主要是考虑到以下几个问题: 1.定位区域存在一 ...

  2. EasyPOI校验实现返回错误信息及行号

    IExcelModel 获取错误信息 public class ExcelVerifyEntity implements IExcelModel { private String errorMsg; ...

  3. easyui-combobox的option选项为true与false时的问题

    如题,我们使用easyui-combobox,当我们的选择项为true与false时,即选择是否,后台返回一个boolean类型的变量,那么这时候,通过form表单进行反显会出现这样的问题:表单里ea ...

  4. 爬取baidu的明星的名称及头像

    #!/1111111111usr/bin/env python# -*- encoding: utf-8 -*-# Created on 2018-11-15 15:24:12# Project: d ...

  5. spark原理

    SparkContext将应用程序代码分发到各Executors,最后将任务(Task)分配给executors执行 Application: Appliction都是指用户编写的Spark应用程序, ...

  6. vue，react，angular

    一.Vue.js:     其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库.     Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...

  7. css隐藏多余的文字并出现省略号

    <meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; ove ...

  8. 学习Acegi应用到实际项目中（6）

    在企业应用中,用户的用户名.密码和角色等信息一般存放在RDBMS(关系数据库)中.前面几节我们采用的是InMemoryDaoImpl,即基于内存的存放方式.这节我们将采用RDBMS存储用户信息. Us ...

  9. easyui属性赋值

    了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性(id,text,iconCls,checked,state,attribute,target).而原先这个几个属性想 ...

  10. 第52章：Java操作MongoDB-[Mongo-Java-3.x]

    ①范例:连接数据库 package cn.mldn; import com.mongodb.MongoClient; import com.mongodb.MongoClientURI; import ...