1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset=UTF-8>
  5. <title>SCROLL</title>
  6. <style type="text/css">
  7. </style>
  8. <script type="text/javascript">
  9. var goToWhere = function (where)
  10. {
  11. var me = this;
  12. me.site = [];
  13. me.sleep = me.sleep ? me.sleep : 16;
  14. me.fx = me.fx ? me.fx : 6;
  15. clearInterval (me.interval);
  16. var dh = document.documentElement.scrollHeight || document.body.scrollHeight;
  17. var height = !!where ? dh : 0;
  18. me.interval = setInterval (function ()
  19. {
  20. var top = document.documentElement.scrollTop || document.body.scrollTop;
  21. var speed = (height - top) / me.fx;
  22. if (speed === me.site[0])
  23. {
  24. window.scrollTo (0, height);
  25. clearInterval (me.interval);
  26. }
  27. window.scrollBy (0, speed);
  28. me.site.unshift (speed);
  29. }, me.sleep);
  30. };
  31. </script>
  32. </head>
  33. <body>
  34. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
  35. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
  36. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
  37. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
  38. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
  39. <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
  40. <div  onclick="goToWhere(0)"
  41. style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>
  42. <div  onclick="goToWhere(1)"
  43. style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
  44. </body>
  45. </html>

js滚动到顶部底部代码的更多相关文章

  1. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  2. selenium webdriver——JS滚动到最底部

    JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...

  3. JQuery - 点击，滚动回到顶部 / 底部刷新回到顶部

    if ($(document).scrollTop() != 0) { //刷新之后,回到顶部 $('body,html').animate({ scrollTop: 0 }, 500); }

  4. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  6. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  7. ListView(1)几个重要属性，关闭滚动到顶部，底部的动画，item之间的分割线，背景等

    见表: android:stackFromBottom="true" 设置该属性之后你做好的列表就会显示你列表的最下面,值为true和false android:transcrip ...

  8. vue.js学习之 如何在better-scroll加载完成后，自动滚动到最底部

    首先我们需要使用scrollTo这个方法: scrollTo(x, y, time, easing) 参数: {Number} x 横轴坐标(单位 px) {Number} y 纵轴坐标(单位 px) ...

  9. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

随机推荐

  1. Angular项目中引入jQuery

    npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...

  2. prototype、proto和constructor 关系

    记录: 1.构造函数:如下,Foo()就是一个构造函数 function Foo(){} 2.prototype:每一个构造函数都有一个属性叫prototype,相当于一个指针,指向它的原型对象 Fo ...

  3. 【已转移】【缓存与性能优化】一篇文章搞掂：Redis

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 一.什么是Redis 全称: Remote Dictionary Server 远程字典服务器 实质: 一个缓存结构服务器或数据结 ...

  4. 左闭右开线段树 2019牛客多校（第七场）E_Find the median（点代表区间

    目录 题意 一种解析 AC_Code @(2019第七场牛客 E_Find the median 左闭右开线段树) 题意 链接:here 我理解的题意就是:初始序列为空,有\(n(400000)\)次 ...

  5. mybatis原理与设计模式-日志模块- 适配器模式

    在讲设计模式之前,得先知道java程序设计中得六大原则,才能更好得理解我们得系统为什么需要设计模式 1 单一职责原则 一个类只负责一种职责,只有这种职责的改变会导致这个类的变更.绕口一点的正统说法:不 ...

  6. Python机器学习及分析工具：Scikit-learn篇

    https://www.jianshu.com/p/e0844e7cdba5 https://sklearn.apachecn.org/docs/0.21.3/62.html 中文文档

  7. 政府网站综合防护系统（网防G01）

    政府网站综合防护系统,简称“网防G01”,是首款专门针对政府网站及服务器等关键信息基础资源进行综合防护的产品,由公安部第一研究所和计算机病毒防治技术国家工程实验室(北京)研发. 网防G01的架构 由服 ...

  8. 如何在原生Android项目里嵌入Cordova

    背景: 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova. 在接到项目后比较了一下项目架构和C ...

  9. 以您熟悉的编程语言为例完成一个hello/hi的简单的网络聊天程序

    Socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,可以用来实现不同虚拟机或不同计算机之间的通信,应用程序通常通过"套接字"向网络发出 ...

  10. linux Cron 定时任务（centos 7.2 测试可用）

    1.Cron(学习笔记) 计划任务,是任务在约定的时间执行已经计划好的工作. 格式如下 Seconds Minutes Hours DayofMonth Month DayofWeek Year    ...