在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. tomcat 多实例的Sys V风格脚本

    -------------------------------------------------[翠花,上脚本]------------------------------------------- ...

  2. 关于URL编码 [转]

    转自: http://www.ruanyifeng.com/blog/2010/02/url_encoding.html 作者: 阮一峰 日期: 2010年2月11日 一.问题的由来 URL就是网址, ...

  3. Nginx修改版本信息或隐藏版本号

    一,隐藏版本号.首先说明,这个是某一方面隐藏,不是彻底隐藏.未隐藏之前查看nginx信息: 隐藏方法: 修改nginx.conf配置文件,在http { } 标签里边加入字段: server_toke ...

  4. 牛客网 Wannafly挑战赛8 B.LBJX的三角形

    B-LBJX的三角形 链接:https://www.nowcoder.com/acm/contest/57/B来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K, ...

  5. Ansible之常用模块介绍

    环境 ansible HOST-PATTERN -m MOD_NAME -a MOD_ARGS -C -f forks ssh-keygen -t rsa -P "" ssh-co ...

  6. 2016集训测试赛(二十一)Problem C: 虫子

    题目大意 给你一棵树, 每个点有一个点权. 有两种操作: link / cut 修改某个点的点权 每次操作后, 你要输出以下答案: 在整棵树中任意选两个点, 这两个点的LCA的期望权值. Soluti ...

  7. 解决每次启动Office都出出现设置向导的问题

    昨天不知道怎么地,每次打开Excel都会出现"正在配置Office"的设置向导,并且修复.重置用户均无法解决. 在网上搜索了一下,找到了一个解决方法:把"C:\Progr ...

  8. LeetCode 290 Word Pattern(单词模式)(istringstream、vector、map)(*)

    翻译 给定一个模式,和一个字符串str.返回str是否符合同样的模式. 这里的符合意味着全然的匹配,所以这是一个一对多的映射,在pattern中是一个字母.在str中是一个为空的单词. 比如: pat ...

  9. 初始----python数字图像处理--:环境安装与配置

    一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...

  10. 后台CMS日志处理记录

    自从上一次添加了极光推送之后,我的工程就像是着魔了一样,不管怎么调整,日志级别都是DEBUG. 启动一次工程会打印很多无用日志,今天决定抽时间去研究了一下,最终解决了问题,下面记录一下解决过程. 1. ...