收集篇（已测）--

<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滚动条缓慢滚动到顶部的更多相关文章

  1. js实现点击按钮滚动条缓慢滚动到顶部

    toTop:function(){ //toTop 滚动到顶部 var currentPosition,timer; var speed=10; timer=setInterval(function( ...

  2. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  3. vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...

  4. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  5. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  6. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  7. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. 2018年 js 简易控制滚动条滚动的简单方法

    首先是es2015 的新api Element.scrollIntoView() // 滚动到最上方 等同于 dom.scrollIntoView(true) Element.scrollIntoVi ...

  9. JS DIV列表自动滚动带停顿，滚动到底部后自动滚动到顶部

    setInterval -- 间隔执行函数:element.scrollTop -- 元素滚动条距头部的距离: 因为执行代码需要时间,所以最终动态时间会比设置的要慢 var slide = new S ...

随机推荐

  1. 关于ECSHOP模板架设的服务器php版本过高报错的解决方法（二）

    ECShop安装之后,在后台发现一个错误,这个错误提示的意思:mktime()方法不带参数被调用时,会被抛出一个报错提示. ECShop安装之后,在后台发现一个错误提示: Strict Standar ...

  2. 有关C语言学习的调查

    有关C语言学习的调查 1.Q:你是怎么学习C语言的?(作业,实验,教材,其他),与你的高超技能相比,C语言的学习有什么经验和教训? A:之间在暑假的之后自己有买了一本C PRIME PLUS 来看基本 ...

  3. centos7下引导win7

    1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ### 在后面添加 menuentry &q ...

  4. 面试题-Java基础-Applet部分

    java applet是能够被包含在HTML页面中并且能被启用了java的客户端浏览器执行的程序.Applet主要用来创建动态交互的web应用程序.

  5. Beyond Compare V3.2.3 Beta 中文版

    软件名称: Beyond Compare V3.2.3 Beta 中文版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / WinXP 软件大小 ...

  6. 12.04 css小测div+css...

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. javascript和jquery比较中学习

    获取input的值: document.getElementById("id").value;这里查的是input的name属性 $('input').val(); 设置input ...

  8. html5获取图片的宽高

    var fr = new FileReader; fr.readAsDataURL($("#inputFileId").files[0]); fr.onload = functio ...

  9. 使用Image.GetThumbnailImage 方法返回缩略图

    如果 Image 包含一个嵌入式缩略图像,则此方法会检索嵌入式缩略图,并将其缩放为所需大小. 如果 Image 不包含嵌入式缩略图像,此方法会通过缩放主图像创建一个缩略图像. 请求的缩略图像大小为 1 ...

  10. Hibernate 注解说明

      转:http://blog.csdn.net/u012312373/article/details/46566081   1.类级别注解 @Entity     映射实体类 @Table    映 ...