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. linux 图形化界面 && 谷歌浏览器 安装

    一.图形化界面安装 yum groupinstall "Desktop" 如果运行显示 则 yum groupinstall "X Window System" ...

  2. 安卓学习第一节--环境搭建及Android Studio 安装

    1.安装JDK 2.安装AS 安装参考网址 https://www.cnblogs.com/xiadewang/p/7820377.html 下载网址: http://www.android-stud ...

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

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

  4. AngularJS入门-demo

    双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...

  5. 最大熵与最大似然，以及KL距离。

    DNN中最常使用的离散数值优化目标,莫过于交差熵.两个分布p,q的交差熵,与KL距离实际上是同一回事. $-\sum plog(q)=D_{KL}(p\shortparallel q)-\sum pl ...

  6. Appium+Python自动化 2 定位元素方式

    1.找到 Android SDK安装路径tools 下面的 uiautomatorviewer.bat,如下截图 2.点击uiautomatorviewer.bat进行启动,左上角一共四个按钮,作用分 ...

  7. 【Selenium】【BugList1】调用firefox浏览器，报 TypeError: 'module' object is not callable

    #coding=utf-8 from selenium import webdriver driver=webdriver.firefox() 解决方法:firefox改为Firefox

  8. 《Linux就该这么学》第十一天课程

     防火墙常用的一些命令参数 原创地址:https://www.linuxprobe.com/chapter-08.html firewalld中常用的区域名称及策略规则 区域 默认规则策略 trust ...

  9. MySQL 多表结构的创建与分析

    =====================多对一===================== create table press( id int primary key auto_increment, ...

  10. android-基础编程-ViewPager

    ViewPager android 提供的基础V4包,android studio 导入gradle compile 'com.android.support:support-v4:25.0.0' 1 ...