在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下kodi没有声音的解决

    前几天,心血来潮,就安装了manjaro的pre3版本,由于是mini kde版本的,就随手安装了kodi,可以用来看视频,听音乐和看图片. 结果在所有插件都折腾好了之后发现,在屏幕的右上角有一个喇叭 ...

  2. Android 中利用ViewFlipper 滑动屏幕切换页面,ListView展示数据

    首先新建一个Android项目,命名为ViewFlipperTest 如图:项目机构,本项目主要操作图中红色箭头标注的文件 1.HgroupAdapter.java文件代码↓主要实现listview数 ...

  3. L1-8 外星人的一天

    L1-8 外星人的一天(15 point(s)) 地球上的一天是 24 小时.但地球上还有一些精力和勤奋度都远超一般人的大神级人物,他们的“一天”是以 48 小时为周期运转的,这种人被人们尊称为“外星 ...

  4. Longest Valid Parentheses - LeetCode

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...

  5. bzoj 5092: [Lydsy1711月赛]分割序列

    5092: [Lydsy1711月赛]分割序列 Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 219  Solved: 100[Submit][Stat ...

  6. mysql之字符串操作

    写在前面 上篇文章学习了mysql常用的日期操作的函数,这篇文章将学习mysql的字符串操作的函数. 系列文章 mysql之创建数据库,创建数据表 mysql之select,insert,delete ...

  7. XCODE 4.5 IOS多语言设置 及NSLocalizedString和NSLocalizedStringFromTable的用法。

    前 些天升级到Xcode4.5,现在正在用Xcode4.5+IOS6开发项目,当使用国际化时,遇到了一点问题,之前版本Xcode上新建 Localizable.strings后,添加语言的“+”号不见 ...

  8. Aspose.Total for .NET 2015 - Unlimited License z

    How to license Aspose.Total for .NET products Add "License.cs" [C#] OR "License.vb&qu ...

  9. Android程序员的进阶之路

    本文主要论述的是Android程序员的进阶之路,博主本人就是一名android开发攻城狮,所以这里讲述的大多数是android开发攻城狮的技术进阶之路,如有问题请多指正. 大家都知道程序员之中有有菜鸟 ...

  10. myeclipse执行tomcat报错Exception in thread &quot;main&quot; java.lang.OutOfMemoryError: PermGen space

    将myeclipse所配置的tomcat的jdk进行设置:-Xms512m -Xmx512m -XX:MaxNewSize=512m -XX:MaxPermSize=512m,例如以下图: