js控制滚动条示例

<html>
<head>
<script type="text/javascript">
var currentPosition,timer,timer1;
function GoTop(){
timer=setInterval("runToTop()",1);
}
function GoButtom(){
//alert(document.body.scrollHeight);
timer1=setInterval("runToButtom()",1);

}
function runToTop(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=10;
if(currentPosition>0)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,0);
clearInterval(timer);
alert("over_top");
}
}
function runToButtom(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition+=10;

var topheight=document.body.scrollHeight-document.body.clientHeight;
//alert(currentPosition+"---"+topheight);
if(currentPosition<topheight)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,topheight);
clearInterval(timer1);
alert("over_buttom");
}
}
</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>
GoButtom();
</script>
</body>
</html>

时间： 2024-09-24 13:59:15

js控制滚动条示例的相关文章

js控制滚动条缓慢滚动到顶部

<html> <head> <script type="text/javascript"> var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body.

js控制滚动条缓慢滚动到顶部实现代码_javascript技巧

先把下面的代码拷贝到个html中,运行看效果 复制代码 代码如下: <html> <head> <script type="text/javascript"> var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentE

js实现滚动条滚动到页面底部继续加载_javascript技巧

这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的.但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得. 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据.关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/:如果这个判断为true则表示滚动条滚动到了底部. 实例 <

javascript控制滚动条与获取控件的位置

ie 6 需要用document.documentElement.scrollTop 获取滚动条位置 ie 其他版本可以用 document.body.scrollTop 获取滚动条位置 其他浏览器可以用 window.pageYOffset 获取滚动条位置 当聊天室的内容超出页面范围时, 如何让页面刷新后 显示最下面的内容  代码如下 复制代码  document.getElementById ( 'chatboard').scrollTop=document.getElementById (

JS控制图片翻转示例代码

 本篇文章主要介绍了JS控制图片翻转示例代码(兼容firefox,ie,chrome) 需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

JS控制图片等比例缩放的示例代码

 本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <SCRIPT language="JavaScript"> function DrawImage(ImgD,FitWidth,FitHeight){        var image=new Image();        image.src=ImgD.src;        if(image.width>0 && image.he

delphi发送消息控制滚动条使用示例

本文为大家详细介绍下delphi实现发送消息控制滚动条,主要函数及用法如下,感兴趣的朋友可以参考下哈   1.Perform 函数 复制代码 代码如下: DBGrid1.Perform(WM_VSCROLL,SB_PAGEDOWN,0); //控制滚动条,向后翻页 DBGrid1.Perform(WM_VSCROLL,SB_PAGEUP,0); //控制滚动条,向前翻页 2.SendMessage 函数 复制代码 代码如下: SendMessage(DBGrid1.Handle,WM_VSCRO

delphi发送消息控制滚动条使用示例_Delphi

1.Perform 函数 复制代码 代码如下: DBGrid1.Perform(WM_VSCROLL,SB_PAGEDOWN,0); //控制滚动条,向后翻页 DBGrid1.Perform(WM_VSCROLL,SB_PAGEUP,0); //控制滚动条,向前翻页 2.SendMessage 函数 复制代码 代码如下: SendMessage(DBGrid1.Handle,WM_VSCROLL,SB_PAGEDOWN,0); SendMessage(DBGrid1.Handle,WM_VSCR

JS控制弹出悬浮窗口(一览画面)的实例代码_javascript技巧

在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu