jQuery_悬浮按钮控制页面滚动

最新推荐文章于 2024-07-25 11:26:35 发布

夏鑫

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量4.3k

点赞数

分类专栏： javaScript 文章标签： jquery function stylesheet html javascript div

javaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
        <title>悬浮按钮控制页面滚动</title>  
           
        <meta http-equiv="description" content="this is my page">  
        <meta http-equiv="content-type" content="text/html; charset=gbk">  
  
        <link rel="stylesheet" type="text/css" href="./styles.css">  
        <script type="text/javascript" src="jquery-1.4.2.js"></script>  
        <script>  
            $(function(){   
                $("#downButton").click(function(){   
                    window.scrollBy(0,100);//使用javascript控制，没有使用jquery控制   
                });   
                $("#upButton").click(function(){   
                    window.scrollBy(0,-100);   
                });   
                $("#downText").click(function(){   
                    window.scrollBy(0,100);   
                });   
                $("#upText").click(function(){   
                    window.scrollBy(0,-100);   
                });   
                for (var i=0;i<100 ;i++ ){   
                    $("<h1>"+i+"</h1>").appendTo("#show");   
                }   
            });    
        </script>  
    </head>  
  
    <body>  
  
        <h1 id="downText"  
            style="position:absolute;left:200px;top:expression(parseInt(document.body.scrollTop)+250);">  
            鼠标点击文字下滑   
        </h1>  
        <h1 id="upText"  
            style="position:absolute;left:200px;top:expression(parseInt(document.body.scrollTop)+350);">  
            鼠标点击文字上滑   
        </h1>  
        <div id="show" />  
    </body>  
</html>

感谢： http://161650095-163-com.iteye.com/blog/810061