在html中设置锚点定位我知道的有几种方法。在此和大家分享一下:

1、使用id定位:

<a href="#1F"  name="1F">锚点1</a>
<div name="1F"> <p>
11111111111
</br>
11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>11111111111
</br>
</p>
</div>

这种定位能够针对不论什么标签来定位。

2、使用name定位:

<a href="#5F">锚点5</a>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<a name="5F">1111111</href>

使用name属性仅仅能针对a标签来定位。而对div等其它标签就不能起到定位作用。

3、使用js定位

<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>

html 锚点定位的更多相关文章

  1. html中设置锚点定位的几种常见方法(#号定位)

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  2. 【TRICK】解决锚点定位向下浮动Xpx问题

    1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 利用空div 占位,如下: <a hre ...

  3. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  4. Android tabLayout+recyclerView实现锚点定位

    原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollV ...

  5. Android 实现锚点定位

    相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...

  6. 锚点定位,jquery定位到页面指定位置

    jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...

  7. js实现锚点定位

    js实现锚点定位的原理是,算出定位的标签距离顶部的高度,点击触发标签,重新赋值滚动条的高度到达指定位置. <!DOCTYPE html> <html> <head> ...

  8. html锚点定位不准确问题

    问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...

  9. 微信小程序基于scroll-view实现锚点定位

    代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. [SaltStack] Minion-conf自动更新

    minion-conf配置文件自动更新, 加载 minion-conf是每个minion自身以来的配置, 为了方便我们在中心管控机上(Master)统一配置, 然后下发文件, 进而使得Minion能够 ...

  2. 索尼(SONY) SVE1512S7C 把WIN8降成WIN7图文教程

    这两天接常接到客户要求把SONY笔记本的WIN8系统降成WIN7系统的单子,也接到很多毕业学员遇到最新的SONY笔记本不知道怎么进BIOS,进到BIOS不知道怎么设置从U盘启动,从U盘启动了安装了WI ...

  3. NLP--edit distance

    基本思想 通过插入(insert).删除(delete)和替换(substitute)个操作将一个字符串s1变换到另一个字符串s2的最少步骤数distacnce,用(1-distance/length ...

  4. Codeforces 732F. Tourist Reform (Tarjan缩点)

    题目链接:http://codeforces.com/problemset/problem/732/F 题意: 给出一个有n个点m条边的无向图,保证联通,现在要求将所有边给定一个方向使其变成有向图,设 ...

  5. [转载]robo3t在Ubuntu 16.04中报错的解决方法

    [问题] MongoDB的客户端robo3t在,Ubuntu 16.04中启动时报一个QT的错误: This application failed to start because it could ...

  6. Docker 创建image

      images 是containers的基础.每次使用docker run 命令都要指定image.   列出本地images   zane@zane-V:~$ docker images REPO ...

  7. 【hash】什么是hash,什么是哈希,什么是hash散列,什么是hash一致性算法【关于hash的详解】

    什么是hash,什么是哈希,什么是hash散列,什么是hash一致性算法

  8. 矩阵快速幂计算hdu1575

    矩阵快速幂计算和整数快速幂计算相同.在计算A^7时,7的二进制为111,从而A^7=A^(1+2+4)=A*A^2*A^4.而A^2可以由A*A得到,A^4可以由A^2*A^2得到.计算两个n阶方阵的 ...

  9. NVIDIA® Quadro® 四路缓冲 3D立体方案

    http://www.nvidia.cn/object/quadro_pro_graphics_boards_cn.html NVIDIA® Quadro® 专业显卡让地球学家以及时装设计师等许多专业 ...

  10. HDU 3591 The trouble of Xiaoqian(多重背包+全然背包)

    HDU 3591 The trouble of Xiaoqian(多重背包+全然背包) pid=3591">http://acm.hdu.edu.cn/showproblem.php? ...