<!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. Educational Codeforces Round 82 (Rated for Div. 2)E（DP，序列自动机）

    #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ],t[]; int n,m; ][]; ...

  2. 安装k8s出现 Failed to list *api.Node: Get http://192.168.144.131:8080...: dial tcp 192.168.144.131:8080: getsockopt: no route to

    原因是master主机的防火墙没关,导致无法访问主机的8080端口,解决方法暂时关闭主机上的防火墙. * centos6 : service iptables stop * centos7 : sys ...

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

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

  4. Jmeter学习之-聚合报告详解

    在对接口进行性能测试时,经常用到jmeter的聚合报告来分析数据 首先在待测试的接口或线程组下添加“监听器>聚合报告” 执行请求后,将生成聚合报告,聚合报告包括以下结果参数(中文版+英文版) A ...

  5. linux下修改mysql的编码格式

    修改编码格式:https://blog.csdn.net/qq_30038111/article/details/79376137         改编码格式在配置文件中修改才有效,在命令行中修改没效 ...

  6. LUA利用第三方API访问数据库

    ===========数据库访问--第三方 http { upstream backend { drizzle_server 192.168.4.119:3306 protocol=mysql dbn ...

  7. HTML5圆形百分比进度条插件circleChart

    在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...

  8. 吴裕雄 python 机器学习——支持向量机SVM非线性分类SVC模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets, linear_model,svm fr ...

  9. Crawlab-分布式爬虫管理系统

    一.简介 Crawlab 基于Celery的爬虫分布式爬虫管理平台,支持多种编程语言以及多种爬虫框架. Github: https://github.com/tikazyq/crawlab 参考资料 ...

  10. 【转】Chrome——F12 谷歌开发者工具详解

    Chrome——F12 谷歌开发者工具详解 console source network