<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. vue组件引入

    /src/route/index.js import Demo2 from '@/pages/demo2/index.vue' { path : '/demo2', name : 'demo2', c ...

  2. Vue的iview组件框架select远程搜索,选中后不刷新的问题

    1.场景:弹框内有一个下拉组件(支持搜索),当选择完数据后弹框关闭,再次打开后,下拉框内的数据是刚才选中的数据.原因:分析后觉得是搜索内容没有清空,导致下拉的数据只有一个 2.解决方案 a .解决:调 ...

  3. 第三十篇 玩转数据结构——字典树(Trie)

          1.. Trie通常被称为"字典树"或"前缀树" Trie的形象化描述如下图: Trie的优势和适用场景 2.. 实现Trie 实现Trie的业务无 ...

  4. hfs 文件存储

    hfs 服务器上面的和本地拖上去的文件是同一个文件.对本地文件拖上去之后再修改,服务器文件也会修改.所以服务器要有一个自己的文件存放.

  5. 链接测试工具:Xenu

    Xenu 是一款深受业界好评,并被广泛使用的死链接检测工具.时常检测网站并排除死链接,对网站的 SEO(搜索引擎优化) 非常重要,因为大量死链接存在会降低用户和搜索引擎对网站的信任. 最大支持100线 ...

  6. cookie不支持中文,必须转码后存储,否则会乱码

    cookie不支持中文,必须转码后存储,否则会乱码 Cookie ck = new Cookie("username", URLEncoder.encode(name, " ...

  7. Android开发实战——记账本(3)

    开发日志(3)——适配器 昨天将bean类还有DatabaseHelper类写完.为了在MainActivity中调用,将数据保存到数据库中并显示出来.所以要先编写适配器CostListAdapter ...

  8. python的os库

    os库(operating system,提供操作系统函数) 1. __file__是什么? ans:当前文件的名字. 例如r.py内容如下 import os if __name__ == &quo ...

  9. 消息中间件MQTT

    1.1概念 MQTT(MQ Telemetry Transport) 消息队列遥测传输协议是IBM开发的一种网络应用层的协议,提供轻量级的,支持可发布/可订阅的的消息推送模式,使设备对设备之间的短消息 ...

  10. Led Candle Light - Safe, Cost-Effective, Versatile, Realistic Flame Lighting

    Candles have been used to remove light for centuries, but it took hundreds of years to make better c ...