vue中,实现锚点定位及跳转(url不发生变化)
<div class="footer" @click="returnTop">
document.querySelector("要返回地方的id").scrollIntoView(true);
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView() 作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,
调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平
vue中,实现锚点定位及跳转(url不发生变化)的更多相关文章
- 在vue中实现锚点定位功能
场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...
- vue中的锚点和查询字符串
1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a> 主 ...
- html中设置锚点定位的几种常见方法(#号定位)
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- 锚点定位且不改变url地址
锚点定位且不改变url html 事件触发<li v-for="(item,index) in couponsList.swaps" :key="index&quo ...
- html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...
- html页面内锚点定位及跳转方法总结
1.最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head><style& ...
- 061——VUE中vue-router之通过程序控制路由跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html中设置锚点定位
1.使用id定位: (这样的定位可以针对任何标签来定位. ) <a name="1F" href="#1F">锚点1</a> <d ...
- vue 中 相同的路由不会跳转,更改路由的办法
vue 开发的项目,路由跳转的时候,是相同的路由是不会跳转,页面也不会有更新的 有时候 必须要跳转怎么办, 更改一个参数,num,一直在改变.就可以进入了. this.$router.push({ p ...
随机推荐
- 番外:如何克隆可刷新的PDB(Refreshable PDB)
基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆创建 对应路径:属于克隆.PDB类型为:Refreshable 相关系列请参考<Oracle创建PDB列表文章> 注 ...
- 详解C++11智能指针
前言 C++里面的四个智能指针: auto_ptr, unique_ptr,shared_ptr, weak_ptr 其中后三个是C++11支持,并且第一个已经被C++11弃用. C++11智能指针介 ...
- 结构struct 联合Union和枚举Enum的细节讨论
联合(Union)是一种构造数据类型,它提供了一种使不同类型数据类型成员之间共享存储空间的方法,同时可以实现不同类型数据成员之间的自动类型转换.联合体对象在同一时间只能存储一个成员的值.联合的内存大小 ...
- 第五十三篇 Linux相关——Web服务器
No.1. Apache基本操作 安装:sudo yum -y install httpd 启动:service httpd start 停止:service httpd stop 查看服务运 ...
- ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目
https://blog.csdn.net/qq_21419015/article/details/80420815 第一个MVC应用程序 1创建MVC项目 打开VS ,File--新建--项目,选择 ...
- 箭头函数 与 forEach
array.forEach(function(item,index){ }.bind(this)); 同 array.forEach((item,index) =>{ });
- 1.3、WebRTC架构
文章导读:本文的讲解的是webrtc系统架构,每个人都要Get到这些知识:第一.了解webrtc架构分层:第二.对每层技术有一个清晰的认知.学完本节内容可以为我们后面学习核心API起到至关重要的作用, ...
- HTML学习(12)列表
HTML包括有序列表ol(ordered list).无序列表ul(unordered list).自定义列表dl(difinition list) 有序列表: <ol start=" ...
- 百炼OJ - 1002 - 方便记忆的电话号码
题目链接 思路 开个一千万的数组计数,最后遍历即可. #include<stdio.h> #include<string.h> #include<algorithm> ...
- webview在compileSdkVersion 大于等于23 android6.0以上系统执行js代码异常,但是在compileSdkVersion小于23 android6.0以下系统却执行正常问题
问题分析: 在compileSdkVersion>=23 android6.0以上webview.loadUrl用这个方法执行js时会将js中的一些代码当做特殊字符处理, 比如js中var t= ...