HTML跳转到页面指定位置的几种方法

web前端 同时被 3 个专栏收录
723 篇文章 0 订阅
1099 篇文章 0 订阅
1964 篇文章 2 订阅

前言
有时候,我们想阅读页面中某段精彩的内容,但由于页面太长,用户需要自己滚动页面,查找起来非常麻烦 ,很容易让人失去继续往下阅读的兴趣。这样体验非常不好,所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置,方便用户的阅读。

一、 纯 html 实现

  1. 利用 id 为标记的锚点
    这里作为锚点的标签可以是任意元素。

在这里插入图片描述
2. 利用 a 标签的 name 属性作为锚点
这里作为锚点的标签只能是 a 标签。
在这里插入图片描述
注意:当以 ’ a 标签 name 属性作为锚点 ’ 和 ’ 利用 id 为标记的锚点 ’ 同时出现(即以 name 为锚点和以 id 为锚点名字相同时),会将后者作为锚点。
二、 js 实现

  1. 利用 scrollTo()
    window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果,想具体了解 scrollTo() 可以看看 MDN 中的介绍。

话不多说,看下面代码

「html 部分」:
在这里插入图片描述
「js 部分」:
在这里插入图片描述
2. 利用 scrollIntoView()
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。

下面也直接上代码

「html 部分」:

「js 部分」:
在这里插入图片描述
注意:此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

下面为了方便看效果,把上面的代码整理在一起
在这里插入图片描述
加粗样式
效果图:
在这里插入图片描述

  • 1
    点赞
  • 0
    评论
  • 6
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

重庆千锋

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值