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 ...
随机推荐
- 【BJG吐槽汇】第2期 - 我每周1-2次迟到都是因为你-->ios10!
本期槽点嘉宾:苹果系统 ios10 小吐我记得iphone是在2008年出的,当时我还在用诺基亚N70,对iphone是十分的陌生,想必大家也是,直到iphone4的时候,黄牛成群,饥饿营销,包括出i ...
- OpenH264
转自:http://blog.csdn.net/chinabinlang/article/details/41209053 目前最常用的264工程师x264: 最近有又有一个开源工程OpenH264, ...
- bzoj1298题解
[题意分析] 要求设计一组n个m面的骰子,使每一个骰子i对骰子a[i]的胜率都大于50%. [算法分析] 对于每个i,连一条从i指向a[i]的边,那么题目给出的关系构成了一个有向基环树森林. 对于树上 ...
- SqlDataReader中的GetSqlValue()方法
sdr.GetValue(0) "Title"sdr.GetValue(1)4sdr.GetValue(2)falsesdr.GetValue(3)0sdr.GetValue(4) ...
- JavaScript HTML DOM 元素(节点)
添加和删除节点(HTML 元素) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 例如:这段代码创建新的 < ...
- c#:readonly与const的区别
readonly与const的区别: 1.初始化:const 字段只能在该字段的声明中初始化. readonly 字段可以在声明或构造函数中初始化. 2.值: const 字段是编译时常量(con ...
- volatile(C# 参考)
本文档已存档,并且将不进行维护. volatile(C# 参考) 若要了解有关 Visual Studio 2017 RC 的最新文档,请参阅 Visual Studio 2017 RC 文档. vo ...
- strutsprepareAndExecuteFiter
FilterDispatcher是早期struts2的过滤器,后期的都用StrutsPrepareAndExecuteFilter了,如 2.1.6.2.1.8.StrutsPrepareAndExe ...
- PhpSrom安装xdebug
1.php需要安装xdebug,这样能支持调试. 下载地址:http://www.xdebug.org/download.php,若不清楚下载版本,可将phpinfo的信息复制到下载地址页面的cust ...
- Symfony命令大全
执行命令: $ php bin/console 查看一下命令 Symfony version 3.1.5 - app/dev/debug Usage: command [options] [argum ...