码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 回到顶端

时间:2014-08-04 10:38:57      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   java   使用   os   io   cti   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<style>

body{height:2000px;}

#to_top{background:red; height:27px; width:41px; position:fixed; right:10px; bottom:0px; display:none; cursor:pointer;}

</style>

</head>

 

<body>

<div id="to_top"></div>

</body>

</html>

<script>

var to_top=document.getElementById(‘to_top‘);

//当滚动条滚动的时候,应应用onscroll事件

var time;

window.onscroll=function()//执行以下方法

{

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

    //获取滚动条的高度 当document.body.scrollTop(ff)不兼容时    ||使用document.documentElement.scrollTop;

    if(scrollTop==0){

        clearInterval(time);

        //如果滚动条高度为0的时候

        to_top.style.display=‘none‘;

        }

        else

        {

        to_top.style.display=‘block‘;

        }

}

    to_top.onclick=function()

    {

     time=setInterval(function(){

              

           if(document.body.scrollTop)

           //如果浏览器找到 document.body.scrollTop ,改变这个属性的值为0.这个就是浏览器滚动条的值 应用于高版本的浏览器

           {

            //浏览器高度=浏览器高度-20px;  document.body.scrollTop=document.body.scrollTop-20;

            document.body.scrollTop-=20;

            }

          else

          //否则浏览器不兼容上面的属性时,改应用document.documentElement.scrollTop 低版本浏览器的对象值为0;

            {

            document.documentElement.scrollTop-=20;

            }

       

      },50)

    }

</script>

javascript 回到顶端,布布扣,bubuko.com

javascript 回到顶端

标签:style   http   color   java   使用   os   io   cti   

原文地址:http://www.cnblogs.com/zion0707/p/3889341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!