锚点定位

最新推荐文章于 2023-03-20 20:29:33 发布
最新推荐文章于 2023-03-20 20:29:33 发布
阅读量1.2w 收藏 2
点赞数 3
分类专栏： web前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43431593/article/details/105885588
版权

基本方式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="#mao" >跳到锚那里</a>
    <p>saddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    adsddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    ffffffffffffffffffffffffffffsasssssssss<br/>
    fffffffffffffffffffffffffffffffffffffffffffffffffffffff<br/>
    dassssssssssssssssssssssssssssssssssssssssssss<br/>
    asssssssssssssssssssssssssssssssssssssssssss<br/>
    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
    asssssssssssssssssssssssssssssssssssssssssssssss<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddd<br/>
      saddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    adsddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    ffffffffffffffffffffffffffffsasssssssss<br/>
    fffffffffffffffffffffffffffffffffffffffffffffffffffffff<br/>
    dassssssssssssssssssssssssssssssssssssssssssss<br/>
    asssssssssssssssssssssssssssssssssssssssssss<br/>
    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
    asssssssssssssssssssssssssssssssssssssssssssssss<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddd<br/>
      saddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    adsddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    ffffffffffffffffffffffffffffsasssssssss<br/>
    fffffffffffffffffffffffffffffffffffffffffffffffffffffff<br/>
    dassssssssssssssssssssssssssssssssssssssssssss<br/>
    asssssssssssssssssssssssssssssssssssssssssss<br/>
    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
    asssssssssssssssssssssssssssssssssssssssssssssss<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddd<br/>
      saddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    adsddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    ffffffffffffffffffffffffffffsasssssssss<br/>
    fffffffffffffffffffffffffffffffffffffffffffffffffffffff<br/>
    dassssssssssssssssssssssssssssssssssssssssssss<br/>
    asssssssssssssssssssssssssssssssssssssssssss<br/>
    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
    asssssssssssssssssssssssssssssssssssssssssssssss<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddd<br/>
      saddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    adsddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    ffffffffffffffffffffffffffffsasssssssss<br/>
    fffffffffffffffffffffffffffffffffffffffffffffffffffffff<br/>
    dassssssssssssssssssssssssssssssssssssssssssss<br/>
    asssssssssssssssssssssssssssssssssssssssssss<br/>
    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
    asssssssssssssssssssssssssssssssssssssssssssssss<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddd<br/>
      saddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    adsddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    ffffffffffffffffffffffffffffsasssssssss<br/>
    fffffffffffffffffffffffffffffffffffffffffffffffffffffff<br/>
    dassssssssssssssssssssssssssssssssssssssssssss<br/>
    asssssssssssssssssssssssssssssssssssssssssss<br/>
    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
    asssssssssssssssssssssssssssssssssssssssssssssss<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddd<br/>
      saddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    adsddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    ffffffffffffffffffffffffffffsasssssssss<br/>
    fffffffffffffffffffffffffffffffffffffffffffffffffffffff<br/>
    dassssssssssssssssssssssssssssssssssssssssssss<br/>
    asssssssssssssssssssssssssssssssssssssssssss<br/>
    dsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
    asssssssssssssssssssssssssssssssssssssssssssssss<br/>
    asddddddddddddddddddddddddddddddddddddddddddddddd<br/>
    </p>

    <h3 id="mao">我是一个锚，挑来我这里吧！！！</h3>

</body>
</html>

先写

<a href="#mao" >跳到锚那里</a>

再写

<h3 id="mao">我是一个锚，挑来我这里吧！！！</h3>

演示效果

在这里插入图片描述

在这里插入图片描述

Lion King
关注
专栏目录
js锚点定位
02-05
js锚点定位 js锚点定位js锚点定位js锚点定位js锚点定位js锚点定位
定位锚点
三日沐水
06-01 279
第一节 元素的定位设置position属性:定义建立元素布局所用的定位机制。语法：{position：static/absolute/relative/fixed;} 说明：static:默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通...
锚点定位方案
cwjxyp的博客
03-20 2054
当 alignToTop 为 true 时，scrollIntoViewOptions: {block: “start”, inline: “nearest”}这是它的默认值，当 alignToTop 为 false 时，scrollIntoViewOptions: {block: “end”, inline: “nearest”}这是它的默认值。block：定义元素的垂直方向的对齐方式，有"start", “center”, “end”, 或 “nearest” 4 个选项，默认 start。
详解Vue项目中实现锚点定位
10-17
在Vue项目中实现锚点定位，主要涉及Vue框架中处理路由跳转和页面滚动的技术。传统的HTML中的锚点定位方法，在Vue项目中可能无法正常工作，因为Vue框架对页面DOM的管理与原生HTML有所不同。具体来说，在Vue项目中，若...
Vue监听滚动实现锚点定位(双向)示例
10-16
在介绍如何使用Vue监听滚动事件实现锚点定位之前，我们首先要了解几个关键的概念和技术点，这些包括Vue框架本身、锚点定位的原理以及监听滚动事件在实现页面内导航中的应用。 Vue.js 是一个构建用户界面的渐进式...
Android tabLayout+recyclerView实现锚点定位的示例
08-27
"Android tabLayout+recyclerView实现锚点定位的示例" Android TabLayout 和 RecyclerView 是 Android 开发中两个常用的控件，分别用于实现标签栏和列表视图。锚点定位是指在列表视图中实现锚点跳转的功能，即当...
vue项目中锚点定位替代方式
10-16
为了避免这种情况，可以采用JavaScript中的scrollIntoView()方法来替代传统的锚点定位。scrollIntoView()方法是Element对象的一个方法，能够使当前的元素滚动到浏览器窗口的可视区域内。当调用这个方法时，浏览器会...
微信小程序实现锚点定位楼层跳跃的实例
08-30
微信小程序实现锚点定位楼层跳跃的实例 了解微信小程序实现锚点定位楼层跳跃的实例是非常重要的，特别是在微信小程序开发中，需要实现锚点定位楼层跳跃的功能时。本文将详细介绍微信小程序实现锚点定位楼层跳跃的...
锚点定位方法与总结
weixin_41864502的博客
07-07 1767
锚点定位方法与总结 当我们制作一个很长的网页时，需要在页面内做一个导航，点击导航里的连接不是新开一个窗口或者跳转到其它网址，而是转到当前页的某一个位置，那么所有要跳转到的哪个位置，我们就叫做锚点，它是一种在页面内部定位的方式。 一、锚点定位方法 HTML结构如下：有个目录标题，一个文章分了三段，每段有个标题 文章内容; 标题一 第一个：很长的文章内容...... 标题二 第一个：很长的文章内容.....
浅谈锚点定位
pumpkin_truck的博客
11-05 2716
简单的HTML中实现文本的锚点定位： 对于一篇长文本来说，我们要想快速的查找某个内容时，无疑是非常困难的，此时此刻就需要我们的锚点定位出马啦。 首先要知道锚点定位的原理是利用超链接标签（a标签）实现页面的跳转。 步骤： 首先要给我们的超链接取一个id名，然后在给想要跳转的文本区域也给起一个ID（#）名，并且两个ID名字要一样。最后点击我们的超链接便可以跳转你想去的内容。 下面我们来看看具体的事例： <a name="first">顶部</a> <p>Lorem
简单实现锚点定位
爱兰河少
01-06 378
import React, { Component } from 'react'; export default class Main extends Component { constructor(props) { super(props); this.state = {}; } componentDidMount() {} jumpHandler = (index) => { let scrollItems = document.queryS...
锚点定位的问题
Hi~豆豆麻麻
10-29 534
在开发h5页面的时候，遇到一个锚点定位的问题，需要实现的功能如下： 上面这个页面需要在手机上实现 1）点击“简介”、“详情”、“推荐”时，页面滚动到相对应的位置 2）当手滑动屏幕，到相应位置时，头部导航相对应的tab高亮显示 首先，实现第一个功能，给每个对应的div增加相应的id="anchor_"，代码如下： 以上，是实现点击导航，滚动到锚点的代码。 实现滑动屏幕到相应...
markdown 锚点定位
最新发布
09-29
如果你想在文章中设置一个锚点定位到底部的结束语，可以按照以下步骤进行操作： 1. 在结束语的段落前插入一个带有id属性的锚点标签，例如`<a id="bottom"></a>`。 2. 在文中其他位置使用链接的方式跳转到该锚点，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lion King

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值