<!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. [Note]Splay学习笔记

    开个坑记录一下学习Splay的历程. Code 感谢rqy巨佬的代码,让我意识到了Splay可以有多短,以及我之前的Splay有多么的丑... int fa[N], ch[N][2], rev[N], ...

  2. codeforces div2 603 E. Editor(线段树)

    题目链接:https://codeforces.com/contest/1263/problem/E 题意:一个编译器,每次输入一些字符,R表示光标右移,L表示光标左移,然后有一些左括号(  和 右括 ...

  3. noobSTL-1-配置器-0

    noobSTL-1-配置器-0 0.前言 STL的配置器(allocator),也叫内存分配器,负责空间配置与管理,简单地说,就是负责管理内存的. 从实现的角度来看,配置器是一个实现了动态空间配置.空 ...

  4. 对C#面向对象三大特性的一点总结

    一.三大特性 封装: 把客观事物封装成类,并把类内部的实现隐藏,以保证数据的完整性 继承:通过继承可以复用父类的代码 多态:允许将子对象赋值给父对象的一种能力 二.[封装]特性 把类内部的数据隐藏,不 ...

  5. IntelliJ IDEA 2017.3尚硅谷-----安装

    选择路径 安装目录 bin目录下的文件 启动文件 虚拟机的配置信息 -Xms128m 初始内存 -Xmx750m 最大内存-XX:ReservedCodeCacheSize=240m 可保留代码缓存的 ...

  6. 第一个vi

    选择——VI 在前面板选择波形图表 在程序框图中选择while循环,框住波形图 在编程-数值中选择随机数,连接随机数与波形图 在编程-定时子选项卡中选择--等待下一个整数倍,在数值中选择常量选项,数值 ...

  7. hz和s和脉冲

    先弄清楚定义,HZ是频率的单位,而s是周期的单位:而f=1/T. 故1hz=1s:5hz=1/5=0.02s; 占空比    占空比(Duty Ratio)在电信领域中有如下含义:    在一串理想的 ...

  8. axios 请求中的Form Data 与 Request Payload的区别

    在vue项目中使用axios发post请求时候,后台返回500. 发现是form Data 和 Request payload的问题. 后台对两者的处理方式不同,导致我们接收不到数据. 解决方案:使用 ...

  9. EVE-NG镜像模板资源占用统计

    转:http://www.emulatedlab.com/forum.php?mod=viewthread&tid=432&extra=page%3D1 EVE  Image fold ...

  10. ACM的探索之Everything Is Generated In Equal Probability(这真的是很有趣的话语丫！)

    ---------------------------------------步履不停,奋勇前进! ------------------------难度真的是蛮大丫!后序补充!