DIV 跟随屏幕滚动

最新推荐文章于 2022-08-25 14:49:11 发布

转载最新推荐文章于 2022-08-25 14:49:11 发布 · 2.3k 阅读

文章标签：

这篇博客讲述了一个小孩喜欢听故事的经历，通过一系列和尚的故事填充内容，并使用JavaScript实现故事滚动显示和返回顶部功能。

<!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>  
    <title></title>   
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>   
     <style type="text/css">  
        #test  
        {  
            border: 1px #8aae44 solid;  
            background-color: #eee;  
            padding:20px 10px 20px 10px;  
            margin: 0 0 0 0px;   
            position: absolute;  
            cursor: pointer;    
        }  
        p{  
        color:GrayText;  
        font-size:22pt;  
        font-family:华文彩云;  
        }  
    </style>   
      
 <script type="text/javascript">  
     $(document).ready(function() {  
         //滚动条事件  
         $(window).scroll(function() {  
             //获取窗口一半的高度+滚动条高度  
             var offsetTop = $(window).scrollTop() + $(window).height() / 2;  
             //改变样式 显示   
             $("#test").show();  
             //改变样式 top 高度  
             $("#test").animate({ top: offsetTop + "px" }, { duration: 600, queue: false });  
             //改变left 位置  
             $("#test").animate({ left: $(window).width() - 40 + "px" }, { duration: 600, queue: false });  
         });  
  
         //讲故事 填充测试数据  
         for (var i = 1; i < 999; i++) {  
             $("#content").append("<h2 >" + i + "个和尚！！！</h2> ");  
         }  
         $("#content").append("<h2>" + i + "</h2> 那么多和尚在干吗呢 ？ 预知后事如何，君请听下回分解！！！");  
  
         //返回顶部  
         $("#test").click(function() {  
             $("#test").animate({ top: "0px" }, { duration: 600, queue: false });  
             $(window).scrollTop(0, 0);  
         });  
  
     });  
   
 </script>  
</head>  
<body style="height:3000px;text-align:center">     
  
<div id="test" style="display:none" >顶<br />部</div>   
  
<p >从前有个小孩喜欢听故事  ！</p>  
<p style="color:Gray">故事大概是这样的 从前有座山 山上有很多和尚 ！</p>   
  
<div id="content" style="width:80%;text-align:center" ></div>   
  
</body>  
</html>