您的位置: 主页 > 新闻中心 > 公司新闻

网站导航栏跳转的实现

发布时间:2022-11-09 11:47 栏目: 公司新闻 查看()
点击导航栏目在页面内部跳转;


在普通的html文档中,深圳网站建设公司,我们通常使用A标签< A href = ' # anchor point id ' >:& lt;/a & gt;同时,在需要跳的位置,设置一个锚点(明白渔船要停在海上防止漂走,所以要先下锚,笑一笑,很形象)。如何设置锚点,对应的元素font-family:微软雅黑;字体大小:14px">锚点id ",比如方法1

[div]

& 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;hr & gt

& lt;div & gtdiv1 & lt/div & gt;

& ltdiv & gtdiv2 & lt/div & gt;

[div]

& ltdiv & gtdiv3 & lt/div & gt;

[div][div]

& lt/body & gt;

& lt/html & gt;

[div][div]

[div]

这种方法的缺点页面的URL会发生变化比如URL:file://c:/users/31295/desktop/html 5 instance/小红书exercise.html # div 1、点击最上面的时候< a & gt,跳转到页面内部,顶部URL的红色部分也会发生变化(这不是我们想要的)

[div]

[div]

方法二,在js事件中,通过window.location.hash="divId "改变# number后的值,但是地址也会改变。感觉和第一种方法一样,甚至更麻烦。

[div]

第三,使用Element.scrollIntoView()方法将元素滚动到浏览器窗口的可见区域,先看方法对应的参数。

[div][div]

[div]

element . scrollintoview(align-top); //布尔参数[/div]element . scrollintoview()默认参数为true

element . scrollintoview(scrollintoview options); //对象参数

[div]

1.Element.scrollIntoView()等效于element . scrollintoview(true)[div]

,默认值为true,表示元素的顶部与浏览器可见区域的顶部对齐。

[div]

2.Element.scrollIntoView(false)表示元素的底部与浏览器可视区域的底部对齐。

[div][div]

ScrollIntoViewOptions(对象参数)

[div][div]

[div]

{

[/div]行为:“自动” |“即时”|“平滑”,

block:" start " | " end ",

}

[div]

1.block:“开始”等于真,block:“结束”等于假。

[div][div]

2 .行为可以控制页面跳转的速度。auto和instant都是直接马上跳到锚点,不够友好。平滑意味着平滑过渡到锚点。

[div][div]

在react应用中,首选第三种方法,因为url更改会触及路由跳转。

[div][div]

[div]

scrollToAnchor =(anchor name)= & gt;{

if(anchor name){

[div]
& nb商洛网站优化sp最好的点是什么;
[div]
//找到锚点

[/div]let anchor element = document . getelementbyid(anchorName);

[/div]if(anchor element){

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

上一篇:哪个网站效果最好?
下一篇:微信业务seo精准引流客户,商启云独门绝技。
郑重申明:安茂立网络以外的任何单位或个人,不得使用该案例作为工作成功展示!