在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. (0)git安装

    windows安装 https://blog.csdn.net/sishen47k/article/details/80211002

  2. Java编程经验汇总

    JDK和JRE 大家肯定在安装JDK的时候会有选择是否安装单独的jre,一般都会一起安装,我也建议大家这样做.因为这样更能帮助大家弄清楚它们的区别: Jre 是java runtime environ ...

  3. Akka之BackoffSupervisor

    一.背景 最近在开发一个项目,项目的各模块之间是使用akka grpc传输音频帧的,并且各模块中的actor分别都进行了persist.本周在开发过程中遇到了一个bug,就是音频帧在通行一段时间后,整 ...

  4. Ruby on rails初体验(三)

    继体验一和体验二中的内容,此节将体验二中最开始的目标来实现,体验二中已经将部门添加的部分添加到了公司的show页面,剩下的部分是将部门列表也添加到公司的显示页面,整体思路和体验二中相同,但是还是会有点 ...

  5. EasyMvc入门教程-基本控件说明(2)定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

  6. openssl之EVP系列之12---EVP_Seal系列函数介绍

    openssl之EVP系列之12---EVP_Seal系列函数介绍     ---依据openssl doc/crypto/EVP_SealInit.pod翻译和自己的理解写成     (作者:Dra ...

  7. MongoDB下载安装測试及使用

    1.下载安装 64位:mongodb-win32-x86_64-enterprise-windows-64-2.6.4-signed.msi 余数为1的 db.collection.find({ &q ...

  8. centos7 下编译ffmpeg

    下载包: wget https://ffmpeg.org/releases/ffmpeg-4.1.tar.gz GCC如果没有yasm: http://yasm.tortall.net/Downloa ...

  9. 2016.6.21 将Eclipse中项目部署到tomcat下

    新建的web项目,各种都配置好,选择run on server之后,发现运行失败,并不能访问需要的网址.而脱离eclipse,将生成的war文件直接放到tomcat的webapp下时,可以正常访问.所 ...

  10. WinForm启动时接收参数

    1 默认的Main函数,修改如下: static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [ST ...