js实现网页锚点跳转,谷歌和火狐浏览器均适用

想做一个文档目录,需要添加锚点,点击跳转到指定位置。我开始使用a标签的name 属性,发现只能在火狐浏览器跳转,在谷歌浏览器里点了没有任何反应。尝试了几次都失败,最后用下面的js,完美适用。
下面是示例代码:
目录部分

<ul>
      <li><strong>目录</strong></li>
	  <li><a href="javascript:void(0);" οnclick="naver('A')">前言</a></li>
      <li><a href="javascript:void(0);" οnclick="naver('B')">介绍</a></li>
</ul>      

内容部分

<div  id="A"></div>
      <p> 在本WordPress教程中,您将找到使用WordPress创建网站所需的一切。从安装到备份–几乎涵盖了所有内容。</p>
      .
      .
      .
<div  id="B"></div>
      <p> 在本WordPress教程中,您将找到使用WordPress创建网站所需的一切。从安装到备份–几乎涵盖了所有内容。</p>

还有下面这段代码别忘了加在body标签前面:

//设置锚点
function naver(id){
  var obj = document.getElementById(id);
  var oPos = obj.offsetTop;
  return window.scrollTo(0, oPos-36);
}
</script>

可以在我的网站查看使用效果:wpnoob.top

猜你喜欢

转载自blog.csdn.net/weixin_43837883/article/details/105009014