要解决两个需求:



一个是从A页面跳到B页面,滚动到页面的任何地方;



第二个是在B页面内部点击某个元素,滚动到页面的任何地方;





怎么解决啊?很简单,当然是用锚点。





首先在A页面创建一个锚点



<body>


<a href="b.html#pos" target="_blank">点击跳转</a>


<body>



然后在B页面定义这个锚点



<body>


...


这里是很多文字,把页面撑开,撑出滚动条


...


<a name="pos">滚动到这里</a>


...


再加点文字


...


</body>



好,测试,OK!点过去之后是不是“滚动到这里”出现在了浏览器的最上方。



实际的情况经常是制作人员切好的页面,产品突然说要加个功能,需要滚动到某个地方,但是那个地方是个div,并没有a锚点,



创建一个锚点的话又会占据网页的空间,影响到网页的版式,这怎么办呢?我们创建一个隐藏的锚点试试,隐藏的锚点不占用空间。





继续:如果我让B页面里的 <a name="pos">滚动到这里</a>  不显示,就是设定display:none; 那么还能滚动到这里吗? 试试



<body>


...


这里是很多文字,把页面撑开,撑出滚动条


...


<a name = "pos" style = " display : none ; " > 滚动到这里 </a>


隐藏之后滚动到这里


...


再加点文字


...


</body>



不妙,IE可以工作,火狐有点不给面子。



只能换一种思路,给锚点指定一个id能滚动到这里吗? 试试



<body>


...


这里是很多文字,把页面撑开,撑出滚动条


...


<a id = "pos" > 滚动到这里 </a>


隐藏之后滚动到这里


...


再加点文字


...


</body>



OK,成功!看来换成id是个好办法,现在把锚点换成div试试



<body>


...


这里是很多文字,把页面撑开,撑出滚动条


...


<div id = "pos" > 滚动到这里 </div>


隐藏之后滚动到这里


...


再加点文字


...


</body>



OK,成功! 这样就解决了问题,不需要插入一个<a></a>锚点,只需要给div加一个id就行了。





接下来解决第二个需求,在B页面内部点击某个元素,滚动到指定位置。



首先,在B.html顶部创建一个锚点,指向要滚动的那个div



<body>


<a href = "#pos" > 点击这里本页跳转 </a>


...


这里是很多文字,把页面撑开,撑出滚动条


...


<div id = "pos" > 滚动到这里 </div>


隐藏之后滚动到这里


...


再加点文字


...


</body>



OK,成功!那如果要点击一个button按钮滚动到指定位置呢? button按钮不能添加href, 只能曲折解决。



先建立一个隐藏的锚点,然后点击button按钮的时候加一个onclick事件,然后通过js来调用锚点的click事件,曲线救国。


<body>
   
   
 
    
    <script
    
     
    
    type
    
    =
    
    "text/javascript"
    
    >
   
   
 
    
    function
    
     click_scroll
    
    ()
    
     
    
    {
   
   
  
    
    document
    
    .
    
    getElementById
    
    (
    
    "anchor_scroll"
    
    ).
    
    click
    
    ();
   
   
 
    
    }
   
   
 
    
    </script>
   
   
<input
    
     
    
    type
    
    =
    
    "button"
    
     
    
    value
    
    =
    
    "点击button跳转"
    
     
    
    onclick
    
    =
    
    "
    
    click_scroll
    
    ();
    
    "
    
     
    
    />
   
   
<a
    
     
    
    id
    
    =
    
    "anchor_scroll"
    
     
    
    href
    
    =
    
    "#pos"
    
     
    
    style
    
    =
    
    "
    
    display
    
    :
    
    none
    
    "
    
    >
    
    点击这里本页跳转
    
    </a>
   
   
...
   
   
这里是很多文字,把页面撑开,撑出滚动条
   
   
...
   
   
<div
    
     
    
    id
    
    =
    
    "pos"
    
    >
    
    滚动到这里
    
    </div>
   
   
隐藏之后滚动到这里
   
   
...
   
   
再加点文字
   
   
...
   
   
</body>
 
 

   OK,成功!既然button能够成功,那其他的也就好办了,img,div都可以这么做。 
 
 
 
 
  
 
 

   还有一个方法通过jQuery的aminate动画方法也可以做,我贴出代码 
 
 
 
<body>
   
   
 
    
    <script
    
     
    
    type
    
    =
    
    "text/javascript"
    
    >
   
   
 
    
    function
    
     click_scroll
    
    ()
    
     
    
    {
   
   
  
    
    var
    
     scroll_offset 
    
    =
    
     $
    
    (
    
    "#pos"
    
    ).
    
    offset
    
    ();
    
      
    
    //得到pos这个div层的offset,包含两个值,top和left
   
   
  
    
    $("body,html").animate({
   
   
   
    
    scrollTop:scroll_offset.top
    
      
    
    //让body的scrollTop等于pos的top,就实现了滚动
   
   
   
    
    },
    
    0
    
    );
   
   
 
    
    }
   
   
 
    
    </script>
   
   
 
    
    <input
    
     
    
    type
    
    =
    
    "button"
    
     
    
    value
    
    =
    
    "点击button跳转"
    
     
    
    onclick
    
    =
    
    "
    
    click_scroll
    
    ();
    
    "
    
     
    
    />
    
    ...
   
   
这里是很多文字,把页面撑开,撑出滚动条
   
   
...
   
   
<div
    
     
    
    id
    
    =
    
    "pos"
    
    >
    
    滚动到这里
    
    </div>
   
   
隐藏之后滚动到这里
   
   
...
   
   
再加点文字
   
   
...
   
   
</body>


OK,成功!这个方法有个好处,就是控制滚动的速度,上面的蓝色的0就是控制速度的,0是立即的意思,那设为1000试试,



可以看到是慢慢的滚动到了pos,如果设为5000呢,就会更慢了。


为什么会这样呢?因为jQuery的animate本来就是做动画用的,更多功能可以详细研究了。