zoukankan      html  css  js  c++  java
  • css中的锚点

    一,在同一页面:

    在页面适当位置定义如下的锚点

    <a name="top">这里是TOP部分</a>
    <a name="content">这里是CONTENT部分</a>
    <a name="foot">这里是FOOT部分</a>    //这里的name换成id同样有效

    (你可以使用id属性来替代name属性,明明锚点同样有效)

    注意:使用id来定义锚点,可以定位针对任何标签来定位。name属性只能针对a标签来定位。

    对于如上锚点的访问有两种方法:

    1,利用超链接<a></a>制作锚点链接,主要用于页面内的锚点访问

    <a href="#top">点击我链接到TOP</a>
    <a href="#content">点击我链接到CONTENT</a>
    <a href="#foot">点击我链接到FOOT</a>

    2,另一种方式,是直接在页面地址后面加锚点标记,主要用于不同页面之间的锚点访问

    假如本页面的地址是http://文件路径/index.html,要访问foot锚点只要访问如下链接即可
    http://文件路径/index.html#foot

    二,在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点

    <a href="a.html#add">跳转到a.add</a>

    三,点击链接触发js事件,同时跳转到锚点,有两种处理方式:

    1,

    <a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

    2,

    <p id="pNode"><!-- contents --></p><!-- 假设一个需要跳转到的节点 -->
    <a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a> 

     参考博客: html中的锚点介绍和使用

     html 页面内锚点定位及跳转方法总结

  • 相关阅读:
    【bzoj1901】dynamic ranking(带修改主席树)
    一堆乱七八糟绝不正经的排序算法
    bzoj2588 Spoj10628. count on a tree
    poj2104 K-th Number
    【bzoj 3595】: [Scoi2014]方伯伯的Oj
    bzoj1926: [Sdoi2010]粟粟的书架
    P3168 [CQOI2015]任务查询系统
    进程和线程
    History of AI
    es6
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/8328262.html
Copyright © 2011-2022 走看看