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

已于 2022-06-10 13:27:55 修改
阅读量657 收藏 1
点赞数
分类专栏： 每日一bug 文章标签： 小程序 javascript vue.js
于 2021-11-23 13:11:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45723621/article/details/121490941
版权

scrollIntoView

该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。

链接:==> 官网介绍这里我就不喷了.

    function scrollIntoView(id){
         this.$el.querySelector(id).scrollIntoView({
            behavior: 'smooth', // 平滑过渡
            block: 'start' // 上边框与视窗顶部平齐。默认值
         })
    }

注意事项

	在Vue  最好你要跳转的不是最外层id  不然可能会出现null 或者undefined
  	可以用一个标签包住

 	根据其他元素的布局，元素可能无法完全滚动到顶部或底部。

	页面（容器）可滚动时才有用！

错误写法:…

清风徐来-小草
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML跳转到页面指定位置方法[scrollTo() , scrollIntoView() I40.scrollIntoView()]
Mo___yu的博客
04-01 1246
【代码】HTML跳转到页面指定位置方法[scrollTo() , scrollIntoView() I40.scrollIntoView()]
vue点击按钮跳转页面
qq_24441205的博客
02-22 1万+
1.给按钮添加点击事件 <button @click="register">登录</button> 2.实现跳转 在methods里面写入一下代码 register () { //跳转到上一次浏览的页面 this.$router.go(-1) //指定跳转的地址 this.$router.replace('/将要跳转的路由名称') //指定跳转的路由的名字下 this.$router.replace({n
idea 快捷键ctrl+shift+f失效的解决方案
热门推荐
外星喵的博客
03-09 20万+
1. 刚换了新环境，新装的idea的快捷键ctrl+shift+f按了没反应，于是想到快捷键冲突了，马上查看qq和搜狗输入法的快捷键： 这里是将搜狗输入法的简繁切换快捷键换下，我是换成了ctrl+shift+a 2.这里还有第二种方法，就是idea自定义快捷键的设置 步骤如下图所示: 注意下面是按键输入 我这里是用的ctrl+shift+alt+0来设置的，当...
avue点击添加跳转新页面
he3236220的博客
04-06 3016
vue页面 <avue-crud ... :before-open="beforeOpen" ... > 方法： beforeOpen(done, type) { //添加的时候，跳转之前的操作 if (type == "add") { this.$router.push({ path: "/yss/index", query: { }, }); } //修改的时候，跳转之前的操作 if (["edit", "view"].includes
vue通过点击事件实现页面跳转
David_house的博客
04-10 4万+
前言 页面跳转，我们一般都通过路由跳转实现，通常情况下可直接使用router-link标签实现页面跳转，但是如果我们想通过点击别的标签实现页面跳转，怎么办呢？这个时候我们就要用到this.$router.push()方法，下面来给大家简单介绍一下使用！ this.$router.push() 1.首先我们要定义一个点击事件 2.在定义事件中调用this.$router.push()方法 <button @click = "handle">点击跳转</button> <scrip
Angular 利用路由跳转到指定页面的指定位置方法
10-18
最后，在`detail.component.ts`的`ngOnInit`中，我们检查当前窗口的哈希是否为`#readMore`，如果是，则使用`window.location.assign('detail#readMore')`再次触发页面跳转，从而实现滚动到指定位置。 ```typescript...
基于JavaScript实现定时跳转到指定页面
10-23
在这个场景中，我们可以利用`setInterval()`每隔一秒更新页面上的倒计时，并在倒计时结束时调用`location.href`来改变当前页面的URL，从而实现跳转。 以下是一段具体的代码示例： ```html <!DOCTYPE html> ...
vue页面跳转后返回原页面初始位置方法
11-28
在需要记录滚动位置的页面（如`listview`页面），在`beforeRouteLeave`生命周期钩子中，获取当前页面的滚动位置，并将其存储到Vuex的`recruitScrollY`状态中： ```javascript beforeRouteLeave(to, from, next) {...
js点击返回跳转到指定页面实现过程
11-23
在JavaScript中，实现点击返回按钮跳转到指定页面的功能，主要依赖于HTML5引入的`history.pushState()`和`history.replaceState()`方法。这两个方法允许开发者动态修改浏览器的历史记录，从而控制用户点击返回按钮时...
让网页跳转到指定位置的jquery代码非书签
10-26
在本文中，我们将探讨如何使用jQuery实现非书签式的网页跳转到指定位置。 首先，我们来看一下提供的代码片段。调用部分如下： ```javascript var offset = 10; // 设定的偏移量，使目标位置距离顶部有一定的间距 ...
js，jquery滚动/跳转页面到指定位置的实现思路
12-04
要解决两个需求： 一个是从A页面跳到B页面，滚动到页面的任何地方； 第二个是在B页面内部点击某个元素，滚动到页面的任何地方； 怎么解决啊？很简单，当然是用锚点。 首先在A页面创建一个锚点 <body> 点击跳转 <body> 然后在B页面定义这个锚点 <body> … 这里是很多文字，把页面撑开，撑出滚动条 … 滚动到这里 … 再加点文字 … </body> 好，测试，OK！点过去之后是不是“滚动到这里”出现在了浏览器的最上方。 实际的情况经常是制作人员切好的页面，产品突然说要
app门户开发——recycleView的页面的点击跳转
Goblin147的博客
10-25 8847
关于recycleView的页面进行点击跳转设计①功能实现②实现过程三级目录 ①功能实现 ②实现过程 创建四个activity 设计XML文件，以activity_1为例 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
仅用a标签实现点击导航栏跳转到页面对应位置
amercury0818的博客
12-23 2634
a标签是最便捷的方式，不过没有下滑或者上滑的动画，是直接切换到指定位置的，适合新手
页面跳转的几种方式
derpvailzhangfan的专栏
04-15 1631
      http头实现页面跳转：         out.println("");         content是指跳转的时间间隔，单位为秒         ----------------------------------------------         forward方法实现跳转：                 String   url   =   "index.jsp";
小草 客户端 android,小草app安卓版入口
weixin_42668301的博客
06-04 12万+
这里小编为大家提供一个非常不错的线上的看剧软件哦，这里每天都会更新一些市面上比较火爆的各种视频资源，而且更新的速度也是十分的快捷的，无需任何的花费，的大家就可以轻松的在线来观看了。整个平台为大家提供的各种服务也是十分的优质的，线上还有专业的客服人员在线为大家提供更加优质的服务哦。小草app安卓版入口的特色：1、线上的所有的视频资源内容都是有平台专业的人士为大家进行审核的，保证都是正版的内容哦；2、...
【Python实战】用代码来访问1024网站
weixin_34417200的博客
05-08 2万+
1024是一个好网站 首先，此次实战系列的前提是您能科学的找到1024网站！我这里并不提供网站地址，特此声明，这里只是用计算机科学的态度和方法，来分析一个问题。和1024网站没有任何关联。 在1024网站上，不知道你是否和我一样，平时爱逛技术讨论区，爱看一些每日资讯总结的帖子，那么会不会因为板块的主题帖子是按照回复时间排序而找不到自己喜欢看的帖子而心烦意乱呢？是不是为了找自己今天没看过的帖子，...
HTML跳转到页面指定位置
liyibao111的博客
05-05 3544
HTML跳转到页面指定位置。
js 锚点定位的2种简单方法
weixin_54351962的博客
04-20 2万+
一.解决方案 第一种方案：传统的锚点定位 但是这个方案有一个弊端，就是会影响url 的hash <div id="anchor">跳到这里来</div> //html中定义一个锚点，这里可以用name或者id,即锚点的目的地 <a href="#anchor">点击这</a> //这是锚点的入口，点击这，锚点激活，href属性绑定你想跳到的位置的div盒子的id或者name 第二种方案：使用scrollIntoView方法进行定位到某一位置 <div
页面加载完后直接弹窗或者跳转页面
weixin_44653963的博客
09-16 3390
页面加载完后直接弹窗或者跳转页面 今天遇到个问题： 在原页面加载完后立马跳转到一个指定地址的页面，使用的是window.onload方法，发现失效。 <script> window.onload = function(){ window.open("https:www.baidu.com（你想去的指定地址）"); } </script> 这个方法是失效的，原因之一是会被浏览器拦截。 解决方法： 1、使用js的setTimeOut方法 <script&gt
使用jq实现点击跳转到当前页面指定位置
最新发布
09-07
使用jQuery的scrollTo函数可以实现点击跳转到当前页面的指定位置。 首先，需要在HTML中为跳转的目标位置添加一个id属性，例如：```<div id="target"></div>``...以上就是使用jq实现点击跳转到当前页面指定位置的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值