<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}

    </style>

    <script>

    window.onscroll=function()

    {

        var oDiv=document.getElementById('div1');

        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        //alert(document.documentElement.clientHeight);

        //oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';

        //alert(document.documentElement.clientHeight);

        //document.title=oDiv.offsetHeight;

        //alert(oDiv.offsetHeight);

        //alert(document.documentElement.scrollTop);

        //alert(scrollTop);

        //alert(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);

        startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2)+scrollTop);

    }

    var timer=null;

    function startMove(iTarget)

        {

            var oDiv=document.getElementById('div1');

            var oTxt=document.getElementById('txt1');

            clearInterval(timer);

            timer=setInterval(function() {

                var speed=(iTarget-oDiv.offsetTop)/6;

                //alert(iTarget-oDiv.offsetTop);

                //alert(iTarget);

                //alert(speed);

                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(oDiv.offsetHeight==iTarget)

                    {

                        clearInterval(timer);

                    }

                else

                    {

                        document.title=iTarget ;

                        oTxt.value=oDiv.offsetTop;

                        //oTxt.style.top=oTxt.offsetTop+speed+'px';

                        oDiv.style.top=oDiv.offsetTop+speed+'px';

                        //oTxt.style.top=oDiv.offsetTop+speed+'px';

                    }

            },30);

        }

    </script>

</head>

<body style="height:2000px;">

<input type="text" id="txt1" style="position:fixed; right:0; top:0";/>

<div id="div1"></div>

</body>

</html>

js屏幕上下滚动条的更多相关文章

  1. 利用JS实现自定义滚动条

    一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能: 代码如下: <!doctype html> <html> <head> <meta c ...

  2. Python selenium webdriver设置js操作页面滚动条

    js2 = "window.scrollTo(0,0);" #括号中为坐标 当不知道需要的滚动的坐标大小时: weizhi2 = driver.find_element_by_id ...

  3. python3 + selenium 使用 JS操作页面滚动条

    js2 = "window.scrollTo(0,0);" #括号中为坐标 当不知道需要的滚动的坐标大小时: weizhi2 = driver.find_element_by_id ...

  4. java selenium webdriver处理JS操作窗口滚动条

    未经作者允许,禁止转载!!! java selenium webdriver处理JS操作窗口滚动条 java selenium webdriver处理JS操作窗口滚动条 import org.open ...

  5. js动态移动滚动条至底部示例

    使用js动态移动滚动条至底部. var currentPosition,timer;  function GoBottom(){  timer=setInterval("runToBotto ...

  6. js滚动显示: 滚动条置顶/底

    <script> //当聊天室的内容超出页面范围时, 如何让页面刷新后 显示最下面的内容 document.getElementByIdx ( 'chatboard').scrollTop ...

  7. 纯JS自定义网页滚动条

    前言 由于最近在公司很忙,没什么时间更新,忙中抽时间做了一个JS滚动条,因为火狐浏览器与谷歌浏览器的滚动条自定义样式过于麻烦,所以我打算自己写个方便改样式的滚动条 CSS <style> ...

  8. selenium+Python(Js处理浏览器滚动条)

    控制浏览器滚动条 有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助 js 是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户是否阅读 ...

  9. [Jquery] js获取浏览器滚动条距离顶端的距离

    需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小  一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height( ...

随机推荐

  1. 每天进步一点点------Allegro 铺铜、内电层分割

    一.Allegro 铺铜 1.建议初学者内电层用正片,因为这样就不用考虑flash焊盘,这时候所有的过孔和通孔该连内电层的就连到内电层,不该连的就不连.而如果用负片,那么如果做焊盘的时候如果没有做fl ...

  2. PHP无法获取.env文件设置的值

    EGPCS指代的是什么?     指的是可以从服务器配置和请求的信息中获取的信息,它包括了environment(环境).GET.POST.cookie.server,对应的全局数组:$_ENV.$_ ...

  3. APL: ANSYS Power Library

    1. creating accurate switching current waveforms (profiles) 2.output-state dependent decoupling capa ...

  4. Vue中引入静态JS文件（爬坑）

    前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-ad ...

  5. 工具 - deepin vscode中的oh-my-zsh乱码

    解决办法 https://blog.zhaytam.com/2019/04/19/powerline-and-zshs-agnoster-theme-in-vs-code/ git clone htt ...

  6. Go标准库之Context

    文章引用自   Go标准库Context 在 Go http包的Server中,每一个请求在都有一个对应的 goroutine 去处理.请求处理函数通常会启动额外的 goroutine 用来访问后端服 ...

  7. mybatis会自动把字段名中的下划线转为驼峰命名法？

    先看一下转化的调用堆栈: 代码如下: 上面代码只是去掉了下划线,并没有首字母小写变大写的代码.再跟进findProperty方法可以找到获取驼峰结果的代码如下: 可以看出通过reflector.fin ...

  8. 117. 填充每个节点的下一个右侧节点指针 II

    Q: 给定一个二叉树 struct Node { int val; Node *left; Node *right; Node *next; } 填充它的每个 next 指针,让这个指针指向其下一个右 ...

  9. java8下 枚举 通用方法

    在项目中经常用到枚举作为数据字典值和描述的相互转化. 用法如下: public enum CommunicationParamsCom { COM_1(1, "COM1"), CO ...

  10. iOS内存管理的知识梳理

    从作用上来说,手机内存小,划分给每个App的内存有限,合理的进行内存管理,有利于提高软件的运行性能和用户体验: 另外,内存管理是一大理论知识块,对这块知识的理解程度也是考核面试者的重要标准. 内存管理 ...