关于scrollIntoView()方法

在写一个控制滚动条滚动的效果的时候，突然发现了scrollIntoView()这个方法，甚是好用，其实它的作用就是起着锚点链接的作用。

 

一、最简单的用法：在行内用onclick事件

1 2	<a href="void(0)"  style="margin-bottom:900px; display:block;" onclick="document.getElementById('showscroll').scrollIntoView();">按钮2</a> <div id="showscroll" style="width:100px; height:100px; pink;">< /div>

还可以这样写：直接写在href里,<a href="point9.scrollIntoView(false)">point9是相应div的ID名< /a>

1 2 3 4 5 6 7 8 9 10

<li>                                                                  <a href="point9.scrollIntoView(false)"  class="point">     电池待机多久？ 电池坏了的话能在外面配吗？ </a>                                             </li>                                             <li class="box_hide" id="point9">                                                 <p class="one">                                                     正常使用可以维持3-5天左右。GPS持续上传可用15个小时。启动"休眠"模式7-9天。可以在外面配置电池。采用的是诺基亚BL-6f标准电池，与诺基亚N95,N78等电池通用。                                                 </p>                                             </li>

 

二，写在JS里：当写在js或者jquery里的时候，我发现写在head里或者js文件里都不管用，这段js代码要放在相应div的后边才管用，还有就是写在jquery里的话，document.getElementById("point"+e).scrollIntoView(false)这句是不能改成jquery方法的。

1 2 3 4 5 6 7 8 9 10 11

<script type="text/javascript">                                         $(".point").each(function(e){                                             $(this).click(function(){                                                 document.getElementById("point"+e).scrollIntoView(false);                                                 $("#point"+e).toggle();                                                 $("#point"+e).siblings(".box_hide").hide();                                                 $(this).css("color","#EC7302");                                                 //alert(e);                                             });                                         })                                     </script>

转载于:https://my.oschina.net/u/3499937/blog/1068671