a-fairy

路由 hash 模式已经将#占用, 页面的锚点功能失效,此时就不能使用a标签进行定位跳转了。

//a标签跳转方法;
//初始位置  跨页面需要在‘#’前面加上页面路径;
<a href="#top">跳转到顶部</a>
//目标位置;
<div id="top">这是顶部</div> 

其他方法:

  1. window.scrollTo(x,y); x,y为坐标,需要知道目标位置的准确坐标;无单位,像素值;和scroll用法基本一致
//也可以是对象
element.scrollTo({
  top: 100,
  left: 100,
  behavior: \'smooth\'
});

2.Element.scrollIntoView() 使某元素对用户可见,就是把该元素拎到可视窗口;

Element.scrollIntoView(不填/布尔值/对象)
Element.scrollIntoView(true)  元素的顶部将与可滚动祖先的可见区域的顶部对齐  默认值
Element.scrollIntoView(false) 元素的底部将与可滚动祖先的可见区域的底部对齐。
element.scrollIntoView(
    {
     behavior: "smooth",//定义过渡动画。其中一个auto或smooth。默认为auto.
     block: "end", //定义垂直对齐。一start,center,end,或 nearest。默认为start.
     inline: "nearest",//定义水平对齐方式。一start,center,end,或 nearest。默认为nearest.
    }
);

分类:

技术点:

相关文章:

  • 2021-11-19
  • 2021-10-01
  • 2022-02-16
  • 2022-01-13
  • 2022-12-23
  • 2021-12-15
  • 2021-10-24
猜你喜欢
  • 2022-01-09
  • 2021-07-02
  • 2022-02-05
  • 2022-01-02
  • 2021-07-20
  • 2021-12-26
  • 2022-01-20
相关资源
相似解决方案