HTML实现点击阅读导航，跳转到页面这个内容的开始部分。

1.相信大家上网的时候可能都用过点击一个页面的导航里的内容，然后页面会直接上下拖动到我们想看的文章的开始地方。那么这样的效果是怎么实现的，今天饿哦就和大家一起来分享。

2.第一我们要跳转到指定内容，那么我们旧的在这个内容的开始设置一个锚点。锚点的作用就是当我们点击鼠标的时候，他会自动找到我们设置的这个锚点，然后自动跳转到锚点位置，实现点击跳转到页面制定内容。

首先我们要在你设置的标签中使用id

比如：<h2 id="lovo">百科全书</h2>

那么现在这个id就是我们设置在h2标签里面的锚点。

然后。我们在页面中导航的位置使用a标签

比如：<a herf="#lovo">跳转到百科全书</a>

那么现在我们使用连接的方式找到了锚点lovo，那么当我们点击a标签的时候，系统会自动找我们设置好的锚点并且实现跳转到指定内容的效果。

转载于:https://www.cnblogs.com/dmiao/p/9465383.html

HTML实现点击阅读导航，跳转到页面这个内容的开始部分。相关推荐

【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...
ECSHOP模板堂仿京东属性跳转插件,ecshop商品不同属性不同url插件,ecshop点击该属性跳到新页面
简介: 大家熟知的ECSHOP本身自带的功能在点选属性之后都是留在当前页面,充其量就是价格发生变化.模板堂仿京东属性跳转插件可在后台属性添加跳转商品ID即可实现商品详情页点击不同属性跳转到不同商品页面 ...
CSDN博文中实现点击文字超链接跳转新页面
实现超链接跳转新页面的方式 1.CSDN中的编辑器自带的超链接操作使用编辑器上方工具栏中的超链接工具,点击超链接按钮,之后输入需跳转的网址就会生成一段这样的格式:[里面是内容](里面是网址),中括号 ...
uniapp-小程序点击底部导航跳转并刷新页面
众所周知,使用uniapp写的小程序有缓存问题, 由于是希望二级页面返回上一页时停留在之前浏览的位置上,这就说明不能在生命周期onShow进行数据重新渲染的操作!!! 但是今天测试小姐姐希望点击底部t ...
SwiftUI之深入解析如何创建列表展示视图和列表如何导航跳转新页面
一.前言地标详情页视图已经创建完成,我们需要提供一种方式让用户可以查看完整的地标列表,并且可以查看每一个地标的详情.地标详情页视图的创建,请参考我的博客:SwiftUI之深入解析如何创建和组合视图. ...
小程序中for循环列表后点击不同列表跳转不同页面
奥利给,加油加油,加油最近没那么多事了,但是学习绝对不能拉下,加油代码: wxml: <view class="lingshi">零食天地</view> ...
fancybox 点击图片后跳转到页面顶部的解决方法
$('.image').fancybox({helpers: {overlay: {locked: false}} }); $('.image').fancybox({helpers: {overla ...
微信小程序wx:for遍历列表后点击不同列表跳转不同页面
wxml代码 <view class="shangpingflex"><view wx:for="{{shangpinglan}}" wx:k ...
微信小程序中使用wx.navigateTo跳转时页面出现空白
在微信小程序中当触发点击事件后跳转的页面时,跳转的页面出现空白,控制台报Page "pages/outline-xi/outline-xi" has not been regist ...

HTML实现点击阅读导航，跳转到页面这个内容的开始部分。

HTML实现点击阅读导航，跳转到页面这个内容的开始部分。相关推荐

最新文章

热门文章