关于scrollIntoView()方法

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


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

<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>

<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>


你可能感兴趣的:(JavaScript,jquery,锚点链接)