在写一个控制滚动条滚动的效果的时候,突然发现了scrollIntoView()这个方法,甚是好用,其实它的作用就是起着锚点链接的作用。
一、最简单的用法:在行内用onclick事件
<a href="void(0)" style="margin-bottom:900px; display:block;" οnclick="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>
<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方法的。
<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://blog.51cto.com/lflianglan/1241223