有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难;

首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id;

之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器;

之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度;

再用一个判断语句来判断一下滚动的高度;我们在设置一个数来让按钮什么时候显示;

var oBtn = document.getElementById("btn");

var timer;

window.onscroll = function(){

  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop > 500){
    oBtn.style.display = 'block';
  }else{
    oBtn.style.display = 'none';
  }
}

之后在给按钮设置一个点击事件,我们要先清除一下间隔器来防止bug的出现,在判断一下现在所处的位置;再用一个变量来获取一下需要移动的距离;

之后再用一个变量来获取一下步长,再用一个变量来计算次数;之后设置一个间隔器,首先计算一下次数来,知道每次移动到什么位置,之后计算每次的位置,之后判断一下是否移动到顶部就行了

    oBtn.onclick = function(){
      clearInterval(timer);
      var start = document.documentElement.scrollTop || document.body.scrollTop;
      var dis = 0 - start;
      var count = Math.floor(1000 / 30);
      var n = 0;
      timer = setInterval(function () {
      n++;
      var a = 1 - n / count;
      var cur = start + (1 - Math.pow(a,3)) * dis;
      document.documentElement.scrollTop = document.body.scrollTop = cur;
      if(n == count){
        clearInterval(timer);
      }
    },30)
  }

原生JS返回顶部,带返回效果的更多相关文章

  1. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  2. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 使用原生js 实现点击消失效果

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

  4. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

  5. 利用tween,使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  6. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  7. jquery 如何实现回顶部 带滑动效果

    $("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollT ...

  8. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  9. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  10. 【原生JS】动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

随机推荐

  1. vue结合Promise及async实现高效开发。

    在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件. 在平时的开发里,关于axios我们可能是这样写的 import a ...

  2. 怎样使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息. 一个经常使用设计是使用书签形状. 我们能够给书签加入卷角效果.以使其更为逼真.所谓的"卷角"实际上能够用小角度倾斜的阴影效果来模拟. ...

  3. 【VBA研究】利用DateAdd函数取上月或上年同期的日期

    作者:iamlaosong DateAdd函数返回一个日期.这一日期加上了一个时间间隔.通过这个函数能够计算非常多我们须要的日期,比方上月上年同期日期等. 语法 DateAdd(interval, n ...

  4. server2008系统修改3389远程端口

    我给大家简单谈谈正确修改远程端口的方法        在开始-----运行菜单里,输入regedit,进入注册表编辑,按先面的路径进入修改端口的地方 HKEY_LOCAL_MACHINE\System ...

  5. memcache基础知识-stats参数

    安装memcache: #tar -xvf libevent-1.4.13-stable.tar.gz#cd libevent-1.4.13-stable#./configure && ...

  6. Android在非UI线程中更新UI的方法

    1.使用Thread+Handler实现非UI线程更新UI界面 在UI Thread中创建Handler.用sendMessage(message)或者obtainMessage(result, ob ...

  7. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  8. Atitit. 软件开发中的管理哲学--一个伟大的事业必然是过程导向为主 过程导向 vs 结果导向

    Atitit. 软件开发中的管理哲学--一个伟大的事业必然是过程导向为主    过程导向 vs 结果导向 1. 一个伟大的事业必然是过程导向为主 1 1.1. 过程的执行情况(有明确的执行手册及标准) ...

  9. python学习之pypandoc

    对于程序员来说,文件格式之间的转换是一件非常费劲的事!比如md文件转化为html文件. 于是乎,就有一群牛人搞出了个神器,他就是pandoc. 而python中,对应的第三方模块就是pypandoc. ...

  10. php用explode,可以提供多个字符作为分割符来进行分割数组吗?

    explode — 使用一个字符串分割另一个字符串, 它的函数原型如下: array explode ( string $delimiter , string $string [, int $limi ...