<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. HDU1074 Doing Homework(状压dp)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1074 题意:给定有n门课的作业,每门课交作业有截止时间,和完成作业所花费的时间,如果超过规定时间完成,每超 ...

  2. 2 request的get和post方法

    requests的get方法 1 在百度里面查询关键字的方法,并获取带百度当前页面 import requests keywords = input('请输入>>>').strip( ...

  3. Linux, Nginx - Deepin linux手动安装nginx和出现的问题

    安装步骤 切换至root su 安装依赖库 sudo apt-get install build-essential && sudo apt-get install libtool s ...

  4. HTML文字标签

    <h1>标题标签,总共六个等级,不能创造标签,只有预定义好的标签才可以被浏览器解析 <br>换行标签,没有内容可以修饰也称为空标签 <p>段落标签</p> ...

  5. 2019-08-05 纪中NOIP模拟B组

    T1 [JZOJ1432] 输油管道 题目描述 请你帮忙设计一个从城市M到城市Z的输油管道,现在已经把整个区域划分为R行C列,每个单元格可能是空的也可能是以下7种基本管道之一: 油从城市M流向Z,‘+ ...

  6. Java-POJ1010-STAMP

    说良心话,题目不难,但是题目真的很不好懂,解读一下吧 题意: 读入分两行,第一行为邮票面额(面额相同也视为种类不同)以0结束,第二行为顾客要求的面额,以0结束 要求:每个顾客最多拿4张邮票,并求最优解 ...

  7. python接口自动化之用HTMLTestRunner生成html测试报告

    [第一步]:引入HTMLTestRunner包 1.下载HTMLTestRunner,下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html ...

  8. Port 3000 is already in use

    cmd输入:netstat -ano | findstr :3000//查看是谁占用了3000号端口 显示如下 TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 18412 T ...

  9. HTTP头部字段总结【转】

    原作者: 留七七, 地址:http://www.jianshu.com/p/6e86903d74f7 一.常用标准请求头字段 Accept  设置接受的内容类型 Accept-Charset    设 ...

  10. jquery点击添加样式,再次点击移除样式

    $("#divSetting").on("click", function () { $(this).toggleClass("open") ...