在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. python - break和continue

    break 终止整个循环:当循环或判断执行到break语句时,即使判断条件为True或者序列尚未完全被历遍,都会跳出循环或判断 for i in xrange(10): print(i) if i = ...

  2. hdu 5020(斜率的表示+STL)

    Revenge of Collinearity Time Limit: 8000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  3. hdu 3986(最短路变形好题)

    Harry Potter and the Final Battle Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65536/6553 ...

  4. 如何在CentOS 7上安装Nginx

    第一步 - 添加Nginx存储库要添加CentOS 7 EPEL仓库,请打开终端并使用以下命令: sudo yum install epel-release第二步 - 安装Nginx现在Nginx存储 ...

  5. org.apache.commons.io.Charsets

    requiredCharsets:由Java平台支持字符集对象标准名称,构造一个sorted map. public void test() { Map<String, Charset> ...

  6. MySQL复制表结构和内容到另一张表(转)

    MySQL不要看它小,一个开源的产物,要学习它的东西真的很多.而它的一切是SQL Server无法比拟的. 复制表结构及数据到新表 create table 新表 select * from 旧表 只 ...

  7. Linux基础学习3

    鸟哥私房菜第十一章   read 用来读取键盘输入的变量,常被用在shell script的交互当中 [root@www ~]# read [-pt] variable 选项不参数: -p :后面可以 ...

  8. 深入浅出 Cocoa 之 Core Data(1)- 框架详解

    深入浅出 Cocoa 之 Core Data(1)- 框架详解 罗朝辉(http://blog.csdn.net/kesalin) CC 许可,转载请注明出处 Core data 是 Cocoa 中处 ...

  9. 2016.10.19 intelliJ的基本操作

    参考大部分来自:IntelliJ IDEA 13试用手记(附详细截图) 用eclipse实在用的有点心累了.所以准备转战intelliJ.   一.下载安装 官网地址:http://www.jetbr ...

  10. 转: 使用maven给spring项目打可直接运行的jar包(配置文件内置外置的打法)

    from:  http://www.cnblogs.com/hdwang/p/5418747.html