在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. Linux和Windows兼容

    1. 介绍 我们知道Linux上的应用程序是ELF格式的,而Windows则是PE格式 所以要解决这个问题首先二进制加载问题:其次,就是API问题,两者的API完全不同要实现兼容,就需要构建一个虚拟层 ...

  2. Scrapy学习-23-分布式爬虫

    scrapy-redis分布式爬虫 分布式需要解决的问题 request队列集中管理 去重集中管理 存储管理   使用scrapy-redis实现分布式爬虫 github开源项目: https://g ...

  3. python3字符串操作总结

    字符串截取  >>>s = 'hello' >>>s[0:3] 'he' >>>s[:] #截取全部字符 'hello' 消除空格及特殊符号 s. ...

  4. JavaScript闭包 循环输出i

    html <body> <p>产品一</p> <p>产品二</p> <p>产品三</p> <p>产品四& ...

  5. Codeforces 629 B. Far Relative’s Problem

      B. Far Relative’s Problem   time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  6. HDU 4343 Interval query(贪心 + 倍增)

    题目链接  2012多校5 Problem D 题意  给定$n$个区间,数字范围在$[0, 10^{9}]$之间,保证左端点严格大于右端点. 然后有$m$个询问,每个询问也为一个区间,数字范围在$[ ...

  7. Akka之Circuit Breaker

    这周在项目中遇到了一个错误,就是Circuit Breaker time out.以前没有接触过,因此学习了下akka的断路器. 一.为什么使用Circuit Breaker 断路器是为了防止分布式系 ...

  8. windows线程yield以及Sleep(0)和SwitchToThread之间的区别

    C++的自定义线程函数内调用了一个自定义的yield()接口. 在windows上是调用了SwitchToThread来实现的,linux是pthread_yield实现的. Sleep(0):时间片 ...

  9. Elite Container DELPHI下的一个轻量级IoC对象容器

    一.简介: Elite Container是DELPHI下的一个轻量级IoC对象容器(IoC:Inverse of Control,反转控制).它是参考了Java中的Spring框架(主要是配置文件的 ...

  10. lampp、xampp安装文档

    第一步:去官网 看这个介绍http://www.apachefriends.org/zh_cn/xampp-linux.html#1677 第二步:下载安装包 2.1 要区分Linux是32位还是64 ...