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 ...
随机推荐
- python HTMLparser
1.概述 如果我们要编写一个搜索引擎,第一步是用爬虫把目标网站的页面抓下来, 第二步就是解析该HTML页面,看看里面的内容到底是新闻.图片还是视频. 假设第一步已经完成了,第二步应该如何解析HTML呢 ...
- Java+Selenium+Testng自动化测试学习(三)— 断言
1.修改Login类加入断言: 断言:检查我们操作页面后得到的结果与我们预期的结果是否一致. 2.使用xml文件运行所有的测试类: Login类写入两个测试用例: package com.test; ...
- EF database first
https://www.cnblogs.com/net064/p/8024150.html 1.EF简介ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对 ...
- Strategic game(无向?)二分图最小点覆盖(Poj1463,Uva1292)
原题链接 此题求二分图的最小点覆盖,数值上等于该二分图的最大匹配.得知此结论可以将图染色,建有向图,然后跑匈牙利/网络流,如下.然而... #include<iostream> #incl ...
- YAML(YML)语法详解
ansible playbook是由yaml(yml)语法书写,结构清晰,可读性强,所以必须掌握yaml(yml)基础语法 语法 描述 锁进 YAML使用固定的缩进风格表示层级结构,每个缩进由两个空 ...
- C语言编译和链接详解(通俗易懂,深入本质)
我们平时所说的程序,是指双击后就可以直接运行的程序,这样的程序被称为可执行程序(Executable Program).在 Windows 下,可执行程序的后缀有.exe和.com(其中.exe比较常 ...
- (c#)奇数值单元格的数量
题目 解
- js对象冒充实现的继承
//人类 function Person(name) { this.name = name; this.showName = function () { console.log("my na ...
- java基础(七)之子类实例化
知识点;1.生成子类的过程2.使用super调用父类构造函数的方法 首先编写3个文件. Person.java class Person{ String name; int age; Person() ...
- 2019-2020-2 20174314王方正 《网络对抗》 Exp0 Kali安装
本博旨记录安装Kali的具体步骤. 一.Vmware的安装 略. 二.Vmware的配置 选择[文件]-[新建虚拟机]. 出现新建虚拟机导向,按照以下图示配置每一步.