html锚点实现的方法

1 通过id

<a href="#div1"> 通过id获取锚点</a>

<div style=" height:200px; width:200px; border:1px solid red; margin-top:1000px;" id="div1"> 通过id获取锚点</div>

2 通过 name

<a href="#div2"> 通过name获取锚点</a>

<div style=" height:200px; width:200px; border:1px solid red; margin-top:1000px;" name="div2"> 通过name获取锚点</div>

3 通过js

<a href="#" onclick="javascript:document.getElementById('div3').scrollIntoView();"> 通过js获取锚点</a>

<div style=" height:200px; width:200px; border:1px solid red; margin-top:1000px;" id="div3"> 通过js获取锚点</div>

1 2 会引起页面路径的变化,会有各种问题出现的可能

推荐第三种:

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

参数为false时,使element的底部与视图(容器)底部对齐。

TIPS:页面(容器)可滚动时才有用!

posted on 2016-07-14 16:58  半夏微澜ぺ  阅读(1258)  评论(0编辑  收藏  举报