微信与项目经理沟通
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在普通的html文档中,深圳网站建设公司,我们通常使用A标签< A href = ' # anchor point id ' >:& lt;/a & gt;同时,在需要跳的位置,设置一个锚点(明白渔船要停在海上防止漂走,所以要先下锚,笑一笑,很形象)。如何设置锚点,对应的元素font-family:微软雅黑;字体大小:14px">锚点id ",比如方法1
& 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;
& ltdiv & gtdiv3 & lt/div & gt;
[div][div]
& lt/body & gt;
& lt/html & gt;
[div][div]
[div]
[div]
第三,使用Element.scrollIntoView()方法将元素滚动到浏览器窗口的可见区域,先看方法对应的参数。
[div][div]
[div]
element . scrollintoview(scrollintoview options); //对象参数
1.Element.scrollIntoView()等效于element . scrollintoview(true)[div]
2.Element.scrollIntoView(false)表示元素的底部与浏览器可视区域的底部对齐。
[div][div]
ScrollIntoViewOptions(对象参数)
[div][div]
[div]
[/div]行为:“自动” |“即时”|“平滑”,
block:" start " | " end ",
}
1.block:“开始”等于真,block:“结束”等于假。
[div][div]
2 .行为可以控制页面跳转的速度。auto和instant都是直接马上跳到锚点,不够友好。平滑意味着平滑过渡到锚点。
[div][div]
在react应用中,首选第三种方法,因为url更改会触及路由跳转。
[div][div]
[div]
if(anchor name){
[/div]let anchor element = document . getelementbyid(anchorName);
[/div]if(anchor element){
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流