<div class="footer" @click="returnTop">

methods:{
  returnTop:function(){
    document.querySelector("#header").scrollIntoView(true);
  }
}
 

document.querySelector("要返回地方的id").scrollIntoView(true);

如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,

以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()  作为标准方法。

scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,

调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平

vue中,实现锚点定位及跳转(url不发生变化)的更多相关文章

  1. 在vue中实现锚点定位功能

    场景如下: 今天早上看到需求方新提的一个需求,这是一份网上答卷,点击题数要实现滚动到对应题目的位置: 注意点:每题题目的高度是不受控制的,你可以取到想跳转的index:(我再循环题目时做了index+ ...

  2. vue中的锚点和查询字符串

    1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a>  主 ...

  3. html中设置锚点定位的几种常见方法(#号定位)

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  4. 锚点定位且不改变url地址

    锚点定位且不改变url html 事件触发<li v-for="(item,index) in couponsList.swaps" :key="index&quo ...

  5. html 页面内锚点定位及跳转方法总结

    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...

  6. html页面内锚点定位及跳转方法总结

    1.最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head><style& ...

  7. 061——VUE中vue-router之通过程序控制路由跳转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. html中设置锚点定位

    1.使用id定位: (这样的定位可以针对任何标签来定位. ) <a name="1F" href="#1F">锚点1</a> <d ...

  9. vue 中 相同的路由不会跳转,更改路由的办法

    vue 开发的项目,路由跳转的时候,是相同的路由是不会跳转,页面也不会有更新的 有时候 必须要跳转怎么办, 更改一个参数,num,一直在改变.就可以进入了. this.$router.push({ p ...

随机推荐

  1. python HTMLparser

    1.概述 如果我们要编写一个搜索引擎,第一步是用爬虫把目标网站的页面抓下来, 第二步就是解析该HTML页面,看看里面的内容到底是新闻.图片还是视频. 假设第一步已经完成了,第二步应该如何解析HTML呢 ...

  2. Java+Selenium+Testng自动化测试学习(三)— 断言

    1.修改Login类加入断言: 断言:检查我们操作页面后得到的结果与我们预期的结果是否一致. 2.使用xml文件运行所有的测试类: Login类写入两个测试用例: package com.test; ...

  3. EF database first

    https://www.cnblogs.com/net064/p/8024150.html 1.EF简介ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对 ...

  4. Strategic game(无向?)二分图最小点覆盖(Poj1463,Uva1292)

    原题链接 此题求二分图的最小点覆盖,数值上等于该二分图的最大匹配.得知此结论可以将图染色,建有向图,然后跑匈牙利/网络流,如下.然而... #include<iostream> #incl ...

  5. YAML(YML)语法详解

    ansible playbook是由yaml(yml)语法书写,结构清晰,可读性强,所以必须掌握yaml(yml)基础语法 语法 描述 锁进  YAML使用固定的缩进风格表示层级结构,每个缩进由两个空 ...

  6. C语言编译和链接详解(通俗易懂,深入本质)

    我们平时所说的程序,是指双击后就可以直接运行的程序,这样的程序被称为可执行程序(Executable Program).在 Windows 下,可执行程序的后缀有.exe和.com(其中.exe比较常 ...

  7. (c#)奇数值单元格的数量

    题目 解

  8. js对象冒充实现的继承

    //人类 function Person(name) { this.name = name; this.showName = function () { console.log("my na ...

  9. java基础(七)之子类实例化

    知识点;1.生成子类的过程2.使用super调用父类构造函数的方法 首先编写3个文件. Person.java class Person{ String name; int age; Person() ...

  10. 2019-2020-2 20174314王方正 《网络对抗》 Exp0 Kali安装

    本博旨记录安装Kali的具体步骤. 一.Vmware的安装 略. 二.Vmware的配置 选择[文件]-[新建虚拟机]. 出现新建虚拟机导向,按照以下图示配置每一步.