<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. 前后端分离构架 与 json ajax简介

    前后端分离 传统开发方式 曾几何时,JSP和Servlet为Java带来了无限风光,一时间大红大紫,但随着互联网的不断发展,这样的开发方式逐渐显露其弊端,在移动互联网炙手可热的今天,应用程序对于后台服 ...

  2. MVC5+EF6 入门完整教程4 :EF基本的CRUD

    上篇文章主要讲了如何配置EF, 我们回顾下主要过程: 创建Data Model ---> 创建Database Context --->创建databaseInitializer---&g ...

  3. 好文章推荐 数据库mysql

    https://blog.csdn.net/guofeng93/article/details/53994112

  4. day14 tar

    04. 系统中如何对文件进行压缩处理 压缩的命令 tar 压缩命令语法: tar zcvf /oldboy/oldboy.tar.gz 指定要压缩的数据文件 z 压缩的方式 为zip c 创建压缩包文 ...

  5. (c#)独一无二的出现次数

    题目 解

  6. 可以使用的一些API(转存)

    聚合数据 juhe.com 转存的格式不如原文的好看,可以直接访问原文 https://www.jianshu.com/p/9a0acf69b789 api接口应该会越来越火,上个全的,楼主自己找找吧 ...

  7. Servlet继承体系结构

    Servlet如何只定义1个service方法,其它的方法按需求设置 Servlet——接口 ↑继承 GenericServlet——抽象类 ↑继承 HttpServlet——抽象类:推荐使用 Gen ...

  8. C++11 新特性学习

    在Linux下编译C++11 #include<typeinfo> int main() { auto a=; cout<<typeid(a).name()<<en ...

  9. 空字符串(“”)和null和空格字符串(" ")的区别

    1.类型 null表示的是一个对象的值,而并不是一个字符串.例如声明一个对象的引用,String a = null ;""表示的是一个空字符串,也就是说它的长度为0,但它是一个字符 ...

  10. Bash Game hdu 1846

    (一)巴什博奕(Bash Game):只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个.最后取光者得胜. 显然,如果n=m+1,那么由于一次最多只能取m个,所以,无论先取者 ...