js实例--js滚动条缓慢滚动到顶部
收集篇(已测)--
<html>
<head>
<script type="text/javascript">
var currentPosition,timer;
var speed=10;
function GoTop(){
timer=setInterval("runToTop()",1);
}
function runToTop(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed; //speed变量
if(currentPosition>0)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,0);
clearInterval(timer);
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">吃</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">家</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">回</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">你</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div>
<div id="back-up" onclick="GoTop()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回顶部</div>
<script>
window.scrollTo(0,document.body.scrollHeight);
</script>
</body>
</html>
js实例--js滚动条缓慢滚动到顶部的更多相关文章
- js实现点击按钮滚动条缓慢滚动到顶部
toTop:function(){ //toTop 滚动到顶部 var currentPosition,timer; var speed=10; timer=setInterval(function( ...
- js控制div滚动条,滚动滚动条使div中的元素可见并居中
1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...
- [js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 2018年 js 简易控制滚动条滚动的简单方法
首先是es2015 的新api Element.scrollIntoView() // 滚动到最上方 等同于 dom.scrollIntoView(true) Element.scrollIntoVi ...
- JS DIV列表自动滚动带停顿,滚动到底部后自动滚动到顶部
setInterval -- 间隔执行函数:element.scrollTop -- 元素滚动条距头部的距离: 因为执行代码需要时间,所以最终动态时间会比设置的要慢 var slide = new S ...
随机推荐
- Robot Framework使用技巧
1.变量的使用 变量可以在命令行中设置,个别变量设置使用--variable (-v)选项,变量文件的选择使用--variablefile (-V)选项.通过命令行设置的变量是全局变量,对其所有执行的 ...
- 传统flv网页视频(flvplayer)--兼容
1.flv网页视频 项目中需要web打开视频,百度搜了好几个插件,本来是打算用H5 vedio,但是客户的浏览器用的比较老,如果用H5标签的话,IE9以下的浏览器是不支持的.所以费劲又去找了其他插件. ...
- linux上安装Jmeter
一.首先,你的linux上要有jdk,没有的话请参考上一篇 http://www.cnblogs.com/bigshan-1/p/6242991.html 二.延续上篇的linux用户xiaoming ...
- Activiti工作流入门
Activiti简介 Activiti是一个开源的工作流引擎,它实现了BPMN 2.0规范,可以发布设计好的流程定义,并通过api进行流程调度. Activiti 作为一个遵从 Apache 许可的工 ...
- Kafka集群搭建
1.zookeeper搭建 Kafka集群依赖zookeeper,需要提前搭建好zookeeper zookeeper快速搭建推荐地址:http://nileader.blog.51cto.com/1 ...
- Linux下gcc,g++,gdb,scon部分用法笔记
1 Ubuntu下编译安装GCC-4.1.2 拷贝gcc-4.1.2.tar.bz2(我下载的压缩文件)到/usr/local/src 解压 新生成的gcc-4.1.2这个目录被称为源目录,用${sr ...
- 常见的 http 状态码
1~5开头的HTTP状态码分别表示: 1XX 表示消息 2XX 表示成功 3XX 表示重定向 4XX 表示请求错误 5XX 表示服务端错误 常见的HTTP状态码: 200 OK 表示请求成功 一切正常 ...
- SAP HANA procudure 创建用户
SAP HANA中的用户是没有功能进行直接的拷贝的,但是我们可以通过建立存储过程调用,通过sql语句的方式进行拷贝: 存储过程定义如下,各位可根据自己的需求进行修改: CREATE PROCEDURE ...
- 今天学习的裸板驱动之GPIO实验学习心得
GPIO分成很多组今天学习的这个芯片的GPIO有GPA-GPJ个组.具体可在芯片手册中看到. GPIO有很多寄存器,今天学习的这个芯片,他的寄存器分为以下几种类型: (1)端口控制寄存器 (2)端口数 ...
- 图片添加border 不占用图片的大小
因为设计稿中的分割线大多分为两种情况:1.在图片右侧:2.在图片右侧+下方. 那么使用伪类before和after以及绝对定位很容易在不改变原布局的情况使图片按照设计稿输出和保留分割线. 例div.i ...