js滚动到顶部底部代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>SCROLL</title>
<style type="text/css">
</style>
<script type="text/javascript">
var goToWhere = function (where)
{
var me = this;
me.site = [];
me.sleep = me.sleep ? me.sleep : 16;
me.fx = me.fx ? me.fx : 6;
clearInterval (me.interval);
var dh = document.documentElement.scrollHeight || document.body.scrollHeight;
var height = !!where ? dh : 0;
me.interval = setInterval (function ()
{
var top = document.documentElement.scrollTop || document.body.scrollTop;
var speed = (height - top) / me.fx;
if (speed === me.site[0])
{
window.scrollTo (0, height);
clearInterval (me.interval);
}
window.scrollBy (0, speed);
me.site.unshift (speed);
}, me.sleep);
};
</script>
</head>
<body>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
<div onclick="goToWhere(0)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>
<div onclick="goToWhere(1)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
</body>
</html>

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

js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
selenium webdriver——JS滚动到最底部
JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...
JQuery - 点击，滚动回到顶部 / 底部刷新回到顶部
if ($(document).scrollTop() != 0) { //刷新之后,回到顶部 $('body,html').animate({ scrollTop: 0 }, 500); }
[js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
ListView(1)几个重要属性，关闭滚动到顶部，底部的动画，item之间的分割线，背景等
见表: android:stackFromBottom="true" 设置该属性之后你做好的列表就会显示你列表的最下面,值为true和false android:transcrip ...
vue.js学习之如何在better-scroll加载完成后，自动滚动到最底部
首先我们需要使用scrollTo这个方法: scrollTo(x, y, time, easing) 参数: {Number} x 横轴坐标(单位 px) {Number} y 纵轴坐标(单位 px) ...
页面滚动事件和利用JS实现回到顶部效果
页面滚动事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

随机推荐

iconfont字体图标的使用方法
转载于https://www.cnblogs.com/hjvsdr/p/6639649.html 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了 ...
commonJs的运行时加载和es6的编译时加载
参考 : https://www.cnblogs.com/jerrypig/p/8145206.html 1.commonJs的运行时加载 2.ES6编译时加载
数据库的显示、创建、使用、用户授权管理及忘记root用户后重置密码
1.显示数据库 show databases; 默认的数据库及大致功能: mysql -- 用户权限相关数据 test --用于用户测试数据 information_schema -MySQL 本身 ...
webpack构建缓存机制-hash介绍
前言浏览器为了优化体验,会有缓存机制.如果浏览器判断当前资源没有更新,就不会去服务端下载,而是直接使用本地资源.在webpack的构建中,我们通常使用给文件添加后缀值来改名以及提取公共代码到不会改变 ...
PHP 换行处理
换行符 unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性如: <?php echo PHP_EOL; // ...
Let’s Encrypt Wildcard 免费泛域名SSL证书获取安装
2018 年 1 月Let’s Encrypt CA 宣布免费提供通配符证书(Wildcard certificate).通配符证书是一种可被多个子域使用的公钥证书.这意味着,单个证书可用于提供多台服 ...
HBase 入门之数据刷写(Memstore Flush)详细说明
接触过 HBase 的同学应该对 HBase 写数据的过程比较熟悉(不熟悉也没关系).HBase 写数据(比如 put.delete)的时候,都是写 WAL(假设 WAL 没有被关闭) ,然后将数据写 ...
LCD中6800和8080的区别【转】
8080是通过“读使能(RE)”和“写使能(WE)”两条控制线进行读写操作6800是通过“总使能(E)”和“读写选择(W/R)”两条控制线进行很多MCU或者LCD模块外部接口一般采用并行方式,并行接 ...
token的创建及解析
<dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifac ...
Django 模型层关系映射
一.一对一映射 1.什么是一对一 A表中的一条记录只能与B表中的一条记录相关联如:一夫一妻制 2.语法允许在关联的两个类的任何一个类中增加: 属性 = models.OneToOneField(E ...

js滚动到顶部底部代码

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

随机推荐

热门专题