网页移动到页面指定位置

需求:

​ 消息中心需要跳转到指定文章,指定评论页, 找到指定的评论, 然后滚动到那个地方

思路:

​ 方法一:使用锚点路由(在路由上结尾加上#id,网页目标位置元素绑定id)

​ 缺点:

  1. 会在url上加上#锚点
  2. 页面刷新失效
  3. vue 路由为锚点模式时会造成冲突
实现:
async mounted() {
    console.log("sourceId", this.sourceId);
    if (this.skipPage) {//目标页码
      this.pageIndex = this.skipPage;
    }
    await this.getCommentList();
    // window.location.hash = "#" + this.sourceId;
    const { origin, pathname, search } = window.location;
    window.location.href = origin + pathname + search + "#" + this.sourceId;
  },
  
方式二:

​ 使用浏览器DOM实现页面滚动到指定位置

优点:
  1. 不会照成url污染
  2. 简单快捷
实现:
this.$nextTick(() => {
    if (this.sourceId) {
        document.getElementById(this.sourceId).scrollIntoView();
    }
});
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

alignToTop可选

一个Boolean值:

  • 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
  • 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}

scrollIntoViewOptions 可选

一个包含下列属性的对象:

  • behavior 可选

    定义动画过渡效果, "auto""smooth" 之一。默认为 "auto"

  • block 可选

    定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"

  • inline 可选

    定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"

​ 资料:scrollIntoView

scrollIntoView兼容性好

用法简单

需要滚动到的元素.scrollIntoView()

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 要实现在网页中强制打开指定位置的APP,可以使用HTML的链接和URL Scheme来实现。 首先,需要确定目标APP是否支持URL Scheme。URL Scheme是一种特殊的链接格式,可以让APP根据特定的URL来打开。如果目标APP支持URL Scheme,那么可以使用它来实现强制打开APP并指定位置。 在HTML中,可以使用<a>标签来创建一个链接。在链接的href属性中,可以使用目标APP的URL Scheme加上所需的参数来指定要打开的位置。 例如,假设目标APP的URL Scheme是"exampleapp://",并且要打开的位置指定页面,那么可以这样创建链接: <a href="exampleapp://targetpage">打开APP并指定位置</a> 当用户点击该链接时,如果用户的设备上已安装了目标APP,并且APP支持URL Scheme,那么将会自动打开目标APP并显示指定位置。 需要注意的是,URL Scheme的具体格式和参数的使用可能因APP而异,需要查阅目标APP的文档或开发者资源来了解具体的使用方法。 另外,如果目标APP不支持URL Scheme,或者使用URL Scheme无法实现强制打开指定位置的需求,可能需要考虑其他的解决方案或与APP的开发者进行沟通。 ### 回答2: 在HTML中,可以通过使用自定义URL协议和href属性来实现强制打开App并指定位置。下面是使用300字中文回答这个问题的方法: 要在HTML中强制打开App并指定位置,需要使用自定义URL协议。自定义URL协议是一种只能由特定App识别并处理的标识符。 首先,确保你的App已经注册了一个自定义URL协议,这样当用户点击链接时,系统就会打开你的App。 在HTML中,可以使用a标签,并设置href属性为你的自定义URL协议加上相关参数来实现这一功能。例如,如果你的自定义URL协议是"myapp://",你想要打开App并定位到某个位置,你可以在href属性中指定位置的参数。 <a href="myapp://location?id=1">点击这里打开App并指定位置</a> 在上述示例中,用户点击链接后,系统会尝试打开自定义URL协议"myapp://",并将参数"id"的值设为1。你可以在你的App中捕获和解析这些参数,然后执行相应的操作来定位到指定位置。 在某些情况下,浏览器可能会阻止打开自定义URL协议。这种情况下,可以使用javascript来处理。可以在点击链接时触发一个javascript函数,然后使用window.location.href来尝试打开自定义URL协议。 总结起来,要在HTML中强制打开App并指定位置,需要先注册一个自定义URL协议,然后在HTML中使用a标签的href属性来指定打开App的URL,包括参数来指定位置。根据具体情况,可能需要使用javascript来处理浏览器阻止打开自定义URL协议的情况。 ### 回答3: 要在HTML中强制打开应用程序并指定位置,可以使用自定义协议或URL Scheme。自定义协议是一种可以在URL中定义的自定义方案,用于指定打开的应用程序和位置。 首先,为了使用自定义协议,应用程序需要在移动设备上注册自己的协议。例如,一个名为"MyApp"的应用程序可以使用"myapp://"作为其自定义协议。 在HTML中,可以使用`<a>`标签来创建一个包含自定义协议的链接。例如,下面的代码会在点击时尝试打开"MyApp"应用程序并指定位置: ```html <a href="myapp://open?location=someplace">打开MyApp应用程序并指定位置</a> ``` 在点击链接后,如果设备上安装了"MyApp"应用程序并且已经注册了"myapp://"协议,那么应用程序将会被启动。应用程序可以解析URL中的参数,例如"location=someplace",并执行相应的操作。 需要注意的是,自定义协议只能在安装了相应应用程序的设备上使用。如果设备上没有安装对应的应用程序,那么链接将无法使用。 总结起来,要在HTML中实现强制打开应用程序并指定位置,可以使用自定义协议和URL Scheme。我们可以使用`<a>`标签创建一个包含自定义协议的链接,并在点击时尝试打开对应的应用程序并指定位置的参数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肥肥呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值