<!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. （c#）亲密字符串

    题目 解

  2. FIR滤波器工作原理（算法）以及verilog算法实现（包含与IIR的一些对比）

    滤波器在2017年IC前端的笔试中,出现频率十分的高.不论今后是否会涉及,还是要记住一些会比较好.接下来就将从这四个方面来讲解,FIR数字滤波器的工作原理(算法)与verilog实现. ·什么是FIR ...

  3. 美化传奇NPC对话框添加图片显示实列

    NPC对话框一般都是文字显示,有些GM想突出版本特色,在NPC对话框加些专业图片,彰显独特之处,其实这是很简单的.下面为你讲解美化传奇NPC对话框添加图片显示实列 我们要添加你要放入npc图片的补丁. ...

  4. web开发中 前端模板->JavaScript->Controller->JavaScript相应 的交互方式

    首先画张图了解当下流行的phpweb 数据交互套路: 1,模板与JavaScript的交互 给HTML标签赋予onlick事件,点击后触发js方法,jQuery收集页面信息,分析信息. 2,js与co ...

  5. 【做题笔记】[NOIOJ，非NOIp原题]装箱问题

    题意:给定一些矩形,面积分别是 \(1\times 1,2\times 2,3\times 3,4\times 4,5\times 5,6\times 6\).您现在知道了这些矩形的个数 \(a,b, ...

  6. 【渗透测试】ZipperDown 漏洞分析

    0x01 漏洞危害 1. 在使用 HTTP 下载 zip 包并使用有问题的第三方库 unzip 时,攻击者通过劫持 HTTP 流量,可以导致 APP 下载一个恶意的 zip 包,在解压 zip 包时可 ...

  7. Java读取、写入、处理Excel文件中的数据(转载)

    原文链接 在日常工作中,我们常常会进行文件读写操作,除去我们最常用的纯文本文件读写,更多时候我们需要对Excel中的数据进行读取操作,本文将介绍Excel读写的常用方法,希望对大家学习Java读写Ex ...

  8. maven设置指定jdk版本

    今天心血来潮准备折腾一下jeecg,去下载了一个maven版本的项目,既然下载了maven版的,当然就要配置好maven环境了. 因为之前简单学习过maven,当时使用的版本是3.3.9的,但是今天在 ...

  9. java中Integer面试的坑

    class Test{ public static void main(String[] args){ //当值在[-128,127]中,不创建新的Integer Integer f1 = 100,f ...

  10. django template 模板

    九.Template模板 Template 模板是根据view传过来数据在html展示的功能,典型python 模板jinjia2库提供丰富的上下文展示func 创建template位置在项目下与ap ...