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 ...
随机推荐
- [UWP小白日记-7]转换MVA学院的XML字幕为SRT (二)
瞎扯淡 上个版本,非常蠢用来N多的循环导致非常卡性能烂得不行,这次使用XmlDocument类来读取XML字幕 其实根本不用各种扒XML字幕,好吧我这是学习使用XmlDocument类,嗯就是这个样子 ...
- jQuery事件命名空间
先看一些代码: 也可以用bind进行事件绑定.我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间.所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如& ...
- hdu 4342 History repeat itself(数学题)
题目链接:hdu 4342 History repeat itself 题意: 让你找第a个非完全平方数m,并且求前m个数的开方向下取整的和. 题解: 第一个问题: 假设第a个非平方数是X,X前面有n ...
- 关于64位win7环境下VS连接oracle数据库的问题
本机环境:64位win7,安装了64位的oracle桌面类 服务器环境:64位windows server 2008,64位oracle服务器端 问题:本机用sql developer连数据库没有问题 ...
- centos7下引导win7
1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ### 在后面添加 menuentry &q ...
- 使用Gradle创建java web项目
什么是Gradle? Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具. 它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML ...
- hdu1722
链接 一份切成q份需要q刀,切成p份需要p刀:切的部分总会有重复,即gcd(p,q),减去重复部分就是要切的刀数 #include<stdio.h> int gcd(int n,int m ...
- JqGrid的总结大全【转】
jqGrid整理 PS:JqGrid 官方 API 点我 我的笔记: 一. jqGrid的加载. 1.引用相关头文件 引入CSS: <link href="Scripts/jq ...
- Python学习笔记——基础篇【第四周】——迭代器&生成器、装饰器、递归、算法、正则表达式
目录 1.迭代器&生成器 2.装饰器 a.基本装饰器 b.多参数装饰器 3.递归 4.算法基础:二分查找.二维数组转换 5.正则表达式 6.常用模块学习 #作业:计算器开发 a.实现加减成熟及 ...
- 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版
软件名称: 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小 ...