页面跳转指定位置

最新推荐文章于 2024-12-25 19:07:17 发布

原创最新推荐文章于 2024-12-25 19:07:17 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

TypeScript 同时被 3 个专栏收录

2 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

使页面跳转到指定位置

1 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript的Element.scrollIntoView方法动态为DOM元素添加ID，并在页面加载或路由跳转后，将页面滚动到指定元素的位置。通过示例代码展示了TS语法中如何安全调用该方法。

页面跳转指定位置

官方文档

https://developer.mozilla.org/zhCN/docs/Web/API/Element/scrollIntoView
1，给页面DOM动态添加 ID
2，然后利用scrollIntoView 跳转指定位置

const elementId = arr.substring(14) // 刷新或者从其他路由跳来的ID
const element: HTMLElement | null = document.getElementById(elementId) // TS语法比较严格需要加HTMLElement | null
element?.scrollIntoView()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

GITAA

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML跳转到页面指定位置

liyibao111的博客

05-05

3949

HTML跳转到页面指定位置。

js跳转页面指定位置

c332030

02-20

2191

1、获取组件 let element = getElementById() / querySelector() 2、跳转到指定位置 element.scrollIntoView();

参与评论您还未登录，请先登录后发表或查看评论

跳转到网页的指定位置

billy

09-26

951

在终点位置(要跳转到的地方)加一个锚点：【锚点】是在页面内部的一种链接，用于页面显示位置的跳转 1、在.aspx文件中 2、在.aspx.cs文件中 Response.Write("this.location.href='#select'"); 比如页面要跳转到a.aspx页面中：那么Response.Write("this.location.href='a

网页内跳转的页面的指定位置

youhebuke225的博客

05-25

2266

网页内跳转的页面的指定位置 1. 通过<a>标签和锚点进行跳转 <a>的href属性为当前第一个锚点，锚点的写法为href=’#xxx’。在<div>上设置锚点，即id属性  <a href="#abc">点击跳转</a>  <div id="abc">点击跳转的地方</div> 2. 通过JS操作进行跳转设置点击跳转条件 b

页面跳转位置

文摘资讯

11-14

243

全文字数： 5362分钟读完使用 location 对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方式，就是使用 assign() 方法并为其传递一个UR...

页面跳转到指定位置，滑动页面选中指定菜单

weixin_45693459的博客

06-01

611

页面跳转到指定位置，滑动页面选中指定菜单

2.HTML跳转到页面指定位置的几种方法

qq_44438941的博客

11-03

8273

日常总结

点击跳转当前页面指定位置

qq_45723621的博客

11-23

789

scrollIntoView 该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。链接:==> 官网介绍这里我就不喷了. function scrollIntoView(id){ this.$el.querySelector(id).scrollIntoView({ behavior: 'smooth', // 平滑过渡 block: 'start' // 上边框与视窗顶部平齐。默认值

网页移动到页面指定位置

weixin_43575775的博客

02-05

3490

目标元素.scrollIntoView()实现定位到目标元素位置

点击跳转到指定位置

shilianweiyao的专栏

03-23

692

$(".acronym li").click(function(){ event.preventDefault(); var s = $(this).attr('data-scroll-src'); $(window).scrollTop($('h3[data-scroll-dest='+s+']').offset().top-60); });

点击页面中的某一个链接(锚点链接)，就会跳到这个页面的指定位置(锚点),只需要两步

m0_67841039的博客

06-18

973

只要点击该链接，就会自动跳转到锚点处

在新页面中跳转到指定 div容器位置

阿酷tony

05-10

599

在新页面中跳转到指定 div容器位置。要在打开新的页面时跳转到指定div，我们需要结合HTML、JavaScript和后端技术来实现

vue-cli 跳转到页面指定位置

TS_144636的博客

10-24

613

为了实现滚动到指定位置，我们需要在路由导航守卫中处理滚动逻辑。安装vue-router。

页面跳转到指定位置-示例代码

八步赶蝉

05-23

1400

<!DOCTYPE html> <html> <head> <title>点击返回指定位置</title> <style> #nav{ position: fixed; left:0; top:10px; ...

网页精准跳转技巧：通过链接直接定位到指定内容

热门推荐

(黎子)人生编码

06-28

1万+

HTML5 History API 允许我们操作浏览器的会话历史记录（session history），它包括和方法，以及popstate事件。

html button跳转页面_HTML跳转到页面指定位置的几种方法

weixin_39526872的博客

11-29

3228

HTML跳转到页面指定位置的几种方法前言有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。一、纯 html 实现 1. 利用 id 为标记的锚点这里作为锚点的标签可以是任意元素。2. 利用 a 标签的 na...

vue3.0跳转页面指定位置

10-11

在Vue3.0中，可以使用`scrollBehavior`函数来指定页面跳转后的滚动位置。具体步骤如下： 1. 在`router/index.js`文件中，添加`scrollBehavior`函数，示例代码如下： ```javascript const router = createRouter({ history: createWebHistory(), routes: [...], scrollBehavior(to, from, savedPosition) { if (savedPosition) { // 如果浏览器有缓存的滚动位置，则跳转到缓存位置 return savedPosition } else { // 否则，如果目标路由配置了滚动位置，则跳转到指定位置 if (to.hash) { return { selector: to.hash } } // 否则，滚动到页面顶部 return { x: 0, y: 0 } } } }) ``` 2. 在组件的模板中，添加锚点，示例代码如下： ```html <template> <div> <a href="#sectionA">跳转到A</a> <a href="#sectionB">跳转到B</a>  <section id="sectionA">  </section> <section id="sectionB">  </section>  </div> </template> ```