在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. msm8917 GPIO Voh(min)

    有些 pin 可以當成多種 function, 此例以 GPIO function P3 voltage 為例 Voh(min) = 1.67 - 0.45 = 1.22 V

  2. hdu 2669(扩展欧几里得)

    Romantic Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  3. Hotspot JVM下,parallel与concurrent的区别

    转载于知乎 作者:Ted Mosby链接:https://www.zhihu.com/question/21535747/answer/144884632来源:知乎著作权归作者所有.商业转载请联系作者 ...

  4. win10下安装redis

    Window 下安装 下载地址:https://github.com/MSOpenTech/redis/releases Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择, ...

  5. (7)centos7安装配置ftp服务器

    1.安装vsftpd yum install vsftpd -y 2.设置开机启动vsftpd ftp服务 systemctl enable vsftpd.service 3.启动vsftpd服务 s ...

  6. (4)django mtv模式

    mtv模式 http://blog.csdn.net/dbanote/article/details/11338953 models 官方介绍 https://docs.djangoproject.c ...

  7. HDU 6229 Wandering Robots(2017 沈阳区域赛 M题,结论)

    题目链接  HDU 6229 题意 在一个$N * N$的格子矩阵里,有一个机器人. 格子按照行和列标号,左上角的坐标为$(0, 0)$,右下角的坐标为$(N - 1, N - 1)$ 有一个机器人, ...

  8. HDU5877Weak Pair

    Weak Pair                                 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 26 ...

  9. MySQL的INFORMATION_SCHEMA数据库简介

    大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_schema数据库.information_schema数据库是做什么用的呢,使用WordPress博客 ...

  10. springboot 2.0 整合 同时支持jsp+html跳转

    springboot项目创建教程 https://blog.csdn.net/q18771811872/article/details/88126835 springboot2.0 跳转html教程  ...