扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
您的位置： 主页 > 新闻中心 > 公司新闻
网站导航栏跳转的实现
发布时间：2022-11-09 11:47 栏目： 公司新闻 查看()
点击导航栏目在页面内部跳转；
在普通的html文档中，深圳网站建设公司，我们通常使用A标签< A href = ' # anchor point id ' >:& lt；/a & gt；同时，在需要跳的位置，设置一个锚点(明白渔船要停在海上防止漂走，所以要先下锚，笑一笑，很形象)。如何设置锚点，对应的元素font-family:微软雅黑；字体大小:14px">锚点id "，比如方法1
[div]
& lt；hr & gt& lt！DOCTYPE html & gt
& lthtml lang = " zh-en " & gt；
& lthead & gt
& ltmeta charset="utf-8 " >
& lttitle & gt红宝书实践
& ltstyle & gt
部门{
宽度:100%；
高度:500px
边框:2px纯色；
背景:橙色；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltul & gt
& lt李& gt& lta href="#div1 " >跳转分区1
& lt李& gt& lta href="#div2 " >跳转分区2
& lt李& gt& lta href="#div3 " >跳转分区3
& lt/ul & gt；
[div]
& lt；div & gtdiv1 & lt/div & gt；
& ltdiv & gtdiv2 & lt/div & gt；
[div]
这种方法的缺点页面的URL会发生变化比如URL:file://c:/users/31295/desktop/html 5 instance/小红书exercise.html # div 1、点击最上面的时候< a & gt，跳转到页面内部，顶部URL的红色部分也会发生变化(这不是我们想要的)& ltdiv & gtdiv3 & lt/div & gt；
[div][div]
& lt/body & gt；
& lt/html & gt；
[div][div]
[div]
[div]
方法二，在js事件中，通过window.location.hash="divId "改变# number后的值，但是地址也会改变。感觉和第一种方法一样，甚至更麻烦。[div]
[div]
element . scrollintoview(align-top)； //布尔参数[/div]element . scrollintoview()默认参数为true第三，使用Element.scrollIntoView()方法将元素滚动到浏览器窗口的可见区域，先看方法对应的参数。
[div][div]
[div]
element . scrollintoview(scrollintoview options)； //对象参数
[div]
，默认值为true，表示元素的顶部与浏览器可见区域的顶部对齐。1.Element.scrollIntoView()等效于element . scrollintoview(true)[div]
[div]
{2.Element.scrollIntoView(false)表示元素的底部与浏览器可视区域的底部对齐。
[div][div]
ScrollIntoViewOptions(对象参数)
[div][div]
[div]
[/div]行为:“自动” |“即时”|“平滑”，
block:" start " | " end "，
}
[div]
scrollToAnchor =(anchor name)= & gt；{1.block:“开始”等于真，block:“结束”等于假。
[div][div]
2 .行为可以控制页面跳转的速度。auto和instant都是直接马上跳到锚点，不够友好。平滑意味着平滑过渡到锚点。
[div][div]
在react应用中，首选第三种方法，因为url更改会触及路由跳转。
[div][div]
[div]
if(anchor name){
[div]
& nb商洛网站优化sp最好的点是什么；[div]
//找到锚点[/div]let anchor element = document . getelementbyid(anchorName)；
[/div]if(anchor element){
郑重申明：安茂立网络以外的任何单位或个人，不得使用该案例作为工作成功展示！
- 在线咨询
- 15715187270
-
微信二维码
-
移动版官网