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就显示,否则就隐藏,还有注意如果变量名 ...
随机推荐
- ribbon学习
spring cloud 中的负载均衡有ribbon和feign 引入ribbon依赖 <!--ribbon相关--> <dependency> <groupId> ...
- Cisco基础(五):配置静态NAT、配置端口映射、配置动态NAT、PAT配置、办公区Internet的访问
一.配置静态NAT 目标: 随着接入Internet的计算机数量的不断猛增,IP地址资源也就愈加显得捉襟见肘.事实上,除了中国教育和科研计算机网(CERNET)外,一般用户几乎申请不到整段的C类IP地 ...
- 函数————count
count和count_if函数是计数函数,先来看一下count函数:count函数的功能是:统计容器中等于value元素的个数. count(first,last,value); first是容器的 ...
- html{-webkit-text-size-adjust:none;}(取消浏览器最小字体限制)
2016年10月13日 09:31:58 ITzhongzi 阅读数 9409 1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 ht ...
- app = Flask(__name__) 是个什么东西
"""第一部分,初始化:所有的Flask都必须创建程序实例, web服务器使用wsgi协议,把客户端所有的请求都转发给这个程序实例 程序实例是Flask的对象,一般情况下 ...
- Kali 和 Centos、Windows三系统的安装事项!
过年了,想在硬盘上直接装Kali Linux,就不用每次插U盘进LiveCD了,但是安装过程真的是!!What fucking word I can say!! 先是分区问题,ntfs有四个分区,其中 ...
- gdb流程控制(例: 循环打印数组)
参考:https://blog.csdn.net/justlinux2010/article/details/9453151 循环/条件 在gdb的脚本中循环遍历整个哈希表,并且加上判断条件来进行统计 ...
- CJE-Jenkins认证工程师备考指南1-考试简介
CloudBees公司提供两项认证 Jenkins工程师(CJE)考试 包括60个选择题 测试开源Jenkins的知识. CloudBees 平台工程师(CCJE)考试 包含90个问题: 60个问题测 ...
- ylbtech-公司-滴滴出行:滴滴出行
ylbtech-公司-滴滴出行:滴滴出行 滴滴出行是涵盖出租车. 专车. 滴滴快车. 顺风车. 代驾及 大巴等多项业务在内的一站式出行平台,2015年9月9日由“滴滴打车”更名而来. 2月1日起, ...
- Anaconda详细安装及使用教程(带图文)
https://blog.csdn.net/ITLearnHall/article/details/81708148