vue项目hash路由锚点定位问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

路由 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.
    }
);

以上是 vue项目hash路由锚点定位问题 的全部内容， 来源链接： utcz.com/z/378974.html

回到顶部