jquery或者javascript控制页面缓慢向上向左移动问题

我想做一个页面在固定div块里面能够左右上下移动的页面效果。基本要求如
本人不才现在样子是这样的： http://meeteve.web-116.com  
希望改进后
1、点击导航后会有一个移动动作，（现在是整个页面移动）但我希望的是他在一个区域里移动，而且点击一级导航楼 时，默认是滚动到该楼第一页面。（比如：现在是在第三楼的第四页面，然后我点击一楼，他会回滚到第一楼的第一页。那就可能有两个动作，一个是向左，然后想上移动，最终位置是在第一楼的第一页）
2、为了大家方便我吧代码贴出来，大家可以复制后直接html打开查看：<!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>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
(function($){
   //页面移动效果函数
$.extend($.fn,{
scrollTo:function(time,to){
time=time||800;
to=to||1;
            $('a[href*=#]', this).click(function(){
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && 
location.hostname == this.hostname) {
      var $target = $(this.hash);
     $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                    if ($target.length) {
                        if (to == 1) {
                            $('html,body').animate({
                                scrollTop: $target.offset().top
                            }, time);
                        }
                        else if(to==2){
                            $('html,body').animate({
                                scrollLeft: $target.offset().left
                            }, time);
                        }else{
alert('argument error');
}
                        return false;
                    }
                }
            });
}
});
})(jQuery);
</script><style type="text/css">
/*页面样式*/
ul,li{ margin:0; padding:0; list-style-type:none;}
body{  width:800px; height:600px; position:relative; overflow:hidden;  padding:0;margin:0;}.hader_con{ width:100%; position:fixed; left:0; top:0; z-index:9999; background:url(images/header_bg.gif) repeat-x;}
*html.hader_con{ width:100%; position:absolute;  z-index:9999; background:url(images/header_bg.gif) repeat-x; left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
.hader{ width:800px ; height:40px;   z-index:999; margin:0 auto;}
.hader ul { width:800px; height:40px; }
.hader ul li{ width:80px; float:left; text-align:center; line-height:40px; margin-right:1px; display:block; position:relative; z-index:999;   }
.hader ul li a{ display:block; color:#ffffff; text-decoration:none;}
.hader ul li a:hover{ color:#FFF; text-decoration:underline; background:url(images/header1_bg.gif) repeat-x;}
.hader_click{ background:url(images/header1_bg.gif) repeat-x;}
.hader2{ width:230px; height:40px; position:absolute; bottom:0px; right:20px; z-index:999;}
.hader2 ul{ background:#CCC;}
.hader2 ul li{ width:40px; line-height:40px; text-align:center; color:Black; float:left; font-size:14px; font-weight:bold;}
.hader2 ul li a{ color:#F00;  color:#333; background:#FFF;border: 1px solid #cccccc; text-decoration:none; font-size:14px; display:block;}
.hader2 ul li a.active {color:#FFF;text-decoration:none; font-weight:normal; background: #ff6600; border: 1px solid #cccccc; -moz-border-radius: 3px;-khtml-border-radius: 3px; -webkit-border-radius: 3px;}
.hader2 ul li a:hover{ text-decoration:underline; background-color:#ff6600; color:White;font-weight:normal;}
.contain{ width:7500px; height:600px; background:#CCC; position:relative; left:0; }
.con_1_1{ width:800px; height:600px;  float:left; background:#fff; color:#666; position:relative;   }
.con_1_2{ width:800px; height:600px;  float:left; background:#09F; color:#0CF;position:relative;  }
.clear{ clear:both; width:0; height:0; margin:0; padding:0;}
.con_main{ width:800px;  margin:0 auto; position:relative; background:#CCC; padding-top:40px;}
.con_m_left{ width:210px; height:100%; float:left; background:#c9f1ff; position:relative;}
.con_m_right{width:590px; height:100%; float:left; background:#ffffff; position:relative;}
#session_1_1{ background:#73cff1; color:#fff;}
#session_2_1{ background:#000; color:#fff;}
#session_2_2{ background:#F90; color:#CCC;}
#session_4_1{ background:#f90; color:Black;}</style>
<script type="text/javascript" language="javascript">
//动态设置右边块的高度/宽度
$(document).ready(function() {  
    initLayout();  
    $(window).resize(function(){  
        initLayout();  
    });  
});  
function initLayout() {  
    $('.con_1_1').width(document.documentElement.clientWidth );  
$('.con_1_1').height(document.documentElement.clientHeight );
    $('.con_1_2').width(document.documentElement.clientWidth );  
$('.con_1_2').height(document.documentElement.clientHeight); 
var conww=document.documentElement.clientWidth;
var chh=document.documentElement.clientHeight ;
$('.contain').width(5*conww);
$('.contain').height(chh-40);
$('.con_main').height(chh-40);
} 
$(function(){
//调用页面移动函数
   $("#session").scrollTo(800,1)
  $(".hader2").scrollTo(2000,2)
});
$(document).ready(function () {
    $('.hader ul li:eq(0)').addClass('hader_click');
})
$(function () {
//导航点击控制
    $('.hader ul li a').click(function () {
        $(this).parent().addClass('hader_click').siblings().removeClass('hader_click');
    })   
})
</script>
</head><!--未完接后面-->

解决方案 »

  1.   


    <!-- 接前面，由于超过了长度，就分成两段-->
    <body id="boy">
    <!-- 导航 --->
    <div class="hader_con">
        <div class="hader" id="session">
           <ul>
               <li><a href="#session_1_1">一楼</a></li>
               <li><a href="#session_2_1">二楼</a></li>
               <li><a href="#session_3_1">三楼</a></li>
          </ul>
        </div>
    </div>
    <!-- 内容 --->
    <div class="contain">
        <div class="con_1_1" id="session_1_1">
            <div class="con_main"> 
               <div class="con_m_left"></div>  
               <div class="con_m_right"></div>             
                <div class="hader2" >
                    <ul>
                        <li>1</li>
                        <li><a href="#session_1_2">2</a></li>
                        <li><a href="#session_1_3">3</a></li>
                        <li><a href="#session_1_4">4</a></li>
                        <li><a href="#session_1_5">5</a></li>
                    </ul>
                 </div>
             </div>              
        </div>
        <div class="con_1_2" id="session_1_2">
            <div class="con_main">1_2               
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_1_1">1</a></li>
                        <li>2</li>
                        <li><a href="#session_1_3">3</a></li>
                        <li><a href="#session_1_4">4</a></li>
                        <li><a href="#session_1_5">5</a></li>
                    </ul>
                 </div>
             </div>  
        </div>
        <div class="con_1_2" id="session_1_3">
            <div class="con_main">1_3
                <div class="hader2">
                    <ul>
                        <li><a href="#session_1_1">1</a></li>
                        <li><a href="#session_1_2">2</a></li>
                        <li>3</li>
                        <li><a href="#session_1_4">4</a></li>
                        <li><a href="#session_1_5">5</a></li>
                    </ul>
                 </div>
             </div>    
        </div>
        <div class="con_1_2" id="session_1_4">
            <div class="con_main">1_4
                <div class="hader2">
                    <ul>
                        <li><a href="#session_1_1">1</a></li>
                        <li><a href="#session_1_2">2</a></li>
                        <li><a href="#session_1_3">3</a></li>
                        <li>4</li>
                        <li><a href="#session_1_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_1_5">
            <div class="con_main">1_5
                <div class="hader2">
                    <ul>
                        <li><a href="#session_1_1">1</a></li>
                        <li><a href="#session_1_2">2</a></li>
                        <li><a href="#session_1_3">3</a></li>
                        <li><a href="#session_1_4">4</a></li>
                        <li>5</li>
                    </ul>
                 </div>
             </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="contain">
        <div class="con_1_1" id="session_2_1">
            <div class="con_main">2_1
                <div class="hader2" >
                    <ul>
                        <li>1</li>
                        <li><a href="#session_2_2">2</a></li>
                        <li><a href="#session_2_3">3</a></li>
                        <li><a href="#session_2_4">4</a></li>
                        <li><a href="#session_2_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_2_2">
         <div class="con_main">2_2
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_2_1">1</a></li>
                        <li>2</li>
                        <li><a href="#session_2_3">3</a></li>
                        <li><a href="#session_2_4">4</a></li>
                        <li><a href="#session_2_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_2_3">
         <div class="con_main">2_3
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_2_1">1</a></li>
                        <li><a href="#session_2_2">2</a></li>
                        <li>3</li>
                        <li><a href="#session_2_4">4</a></li>
                        <li><a href="#session_2_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_2_4">
         <div class="con_main">2_4
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_2_1">1</a></li>
                        <li><a href="#session_2_2">2</a></li>
                        <li><a href="#session_2_3">3</a></li>
                        <li>4</li>
                        <li><a href="#session_2_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_2_5">
         <div class="con_main">2_5
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_2_1">1</a></li>
                        <li><a href="#session_2_2">2</a></li>
                        <li><a href="#session_2_3">3</a></li>
                        <li><a href="#session_2_4">4</a></li>
                        <li>5</li>
                    </ul>
                 </div>
             </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="contain">
        <div class="con_1_1" id="session_3_1">
         <div class="con_main">3_1
                <div class="hader2" >
                    <ul>
                        <li>1</li>
                        <li><a href="#session_3_2">2</a></li>
                        <li><a href="#session_3_3">3</a></li>
                        <li><a href="#session_3_4">4</a></li>
                        <li><a href="#session_3_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_3_2">
         <div class="con_main">3_2
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_3_1">1</a></li>
                        <li>2</li>
                        <li><a href="#session_3_3">3</a></li>
                        <li><a href="#session_3_4">4</a></li>
                        <li><a href="#session_3_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_3_3">
         <div class="con_main">3_3
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_3_1">1</a></li>
                        <li><a href="#session_3_2">2</a></li>
                        <li>3</li>
                        <li><a href="#session_3_4">4</a></li>
                        <li><a href="#session_3_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_3_4">
         <div class="con_main">3_4
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_3_1">1</a></li>
                        <li><a href="#session_3_2">2</a></li>
                        <li><a href="#session_3_3">3</a></li>
                        <li>4</li>
                        <li><a href="#session_3_5">5</a></li>
                    </ul>
                 </div>
             </div>
        </div>
        <div class="con_1_2" id="session_3_5">
         <div class="con_main">3_5
                <div class="hader2" >
                    <ul>
                        <li><a href="#session_3_1">1</a></li>
                        <li><a href="#session_3_2">2</a></li>
                        <li><a href="#session_3_3">3</a></li>
                        <li><a href="#session_3_4">4</a></li>
                        <li>5</li>
                    </ul>
                 </div>
             </div>
        </div>
    </div>
    </body>
    </html>