<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. C语言二维数组指针与指针数组

    http://c.biancheng.net/view/2022.html http://c.biancheng.net/view/2020.html

  2. 交叉连接(CROSS JOIN)

    除了在FROM子句中使用逗号间隔连接的表外,SQL还支持另一种被称为交叉连接的操作,它们都返回被连接的两个表所有数据行的笛卡尔积,返回到的数据行数等于第一个表中符合查询条件的数据行数乘以第二个表中符合 ...

  3. DVWA全级别之File Upload(文件上传)

    File Upload File Upload,即文件上传漏洞,通常是由于对上传文件的类型.内容没有进行严格的过滤.检查,使得攻击者可以通过上传木马获取服务器的webshell权限,因此文件上传漏洞带 ...

  4. Atcoder Beginner Contest 155E(DP)

    #definde HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ]; int main(){ ios: ...

  5. crontab实践

    1.crontab概要 2.crontab使用 3.关键配置信息 3.1如何配置定时任务 4.注意事项 参考 https://www.cnblogs.com/keithtt/p/6946498.htm ...

  6. 软件工程2020第一次作业(by cybersa)

    1 作业描述 作业属于哪个课程 2020春福大软工实践W班 这个作业要求在哪里 寒假作业(1/2) 这个作业的目标 建立博客.掌握markdown语法,学习写博客,回顾,总结,展望自己的学习历程 作业 ...

  7. nmon+python 基于AIX系统数据分析

    https://sourceforge.net/projects/pynmongraph/ github :https://github.com/madmaze/pyNmonAnalyzer nmon ...

  8. Oracle expdp 多表导出处理

    一个项目中需要在oracle数据库某个用户下导出1000多个表,导入到测试库做数据分析测试.很少遇到需要导出这么多表的情况,通常都是按schema导出,或者整库导出.考虑到expdp中include参 ...

  9. ModelSerializer,序列化与反序列化整合

    复习 """ 1.解析模块:全局局部配置 REST_FRAMEWORK = { # 全局解析类配置 'DEFAULT_PARSER_CLASSES': [ 'rest_f ...

  10. mac登录窗口出现白框问题解决

    昨天早上起床打开电脑,发现登录窗口的界面出现了大半边的白框,如下图,可是昨晚上关机前还是好好的,而且新电脑不至于啥也没干屏幕就出问题. 输入密码进入桌面,OK,不是屏幕的问题,那为什么会出现白框呢? ...