html 锚点三种实现方法

在网页中经常用到锚点,特别是在比较长的页面中锚点的使用会增加用户体验,现在php中文网介绍html 锚点三种实现方法
1). 在同一页面中
<a name="add"></a> 或者 <a id="add"></a> (ps:用id兼容性好些)
<a href="#add">跳转到add</a>
2). 在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点
<a href="a.html#add">跳转到a.add</a>
3). 点击链接触发js事件,同时跳转到锚点,有两种处理方式:
第一种:
<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>
第二种:
<p id="pNode"></p>
<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>

scrollIntoView()的用法
scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况
调用方法为 element.scrollIntoView() 参数默认为true。

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

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

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

document.getElementById("view").scrollIntoView();

document.getElementById("view").scrollIntoView(false);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,184评论 0 21
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 学习 jQuery-fullPage.js 插件已经两天,参照网上的案例仿造了一个“魅族Note2官网”网页,中间...
    seporga阅读 6,510评论 2 11
  • 我喜欢钱 钱能买到想要的东西 钱能满足我的欲望 钱能让我过得好一点 我讨厌钱 钱是万恶之源 所有的纠纷 无非是一个...
    逸心格格阅读 366评论 6 0
  • “壹加壹计划”正式开始了! “弟子规,圣人训,首孝悌,次谨信。泛爱众,则亲民,有余力,则学文。” 由此繁衍出“行有...
    壹加壹计划阅读 1,240评论 0 0