vue中,实现锚点定位及跳转(url不发生变化)

2023-11-05

直接上代码

< 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作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 提升用户体验:Vue与compressor.js实现高效文件压缩

    前言 上传文件是一个常见的需求 并且文件大小往往成为限制因素之一 为了提升用户体验和节省带宽消耗 上传时的文件压缩便显得格外重要 本文将介绍基于 Vue 框架和 compressor js 的上传时文件压缩实现方法 通过在上传过程中对文件进
  • Apollo代码学习(六)—模型预测控制(MPC)

    Apollo代码学习 模型预测控制 前言 模型预测控制 预测模型 线性化 单车模型 滚动优化 反馈矫正 总结 前言 非专业选手 此篇博文内容基于书本和网络资源整理 可能理解的较为狭隘 起点较低 就事论事 如发现有纰漏 请指正 非常感谢 查看
  • 前端路上的旅行

    http www w3cplus com front end trip on road html 什么是前端 什么是前端 大部分指的是Web前端开发 这个词是从网页制作演变过来的 名称上有着很明显的时代特征 在互联网的演化过程中 网页制作是
  • 着色器glsl

    着色器使用glsl的类C语言写成的 着色器开头声明版本 接着是输入和输出变量 uniform和main函数 每个着色器入口点是main函数 在该函数中处理输入变量 将结果存放到输出变量中 着色器结构如下 version version nu
  • 走进开源:认识开源许可

    想要查看前面的笔记请翻阅我的CSDN博客 作者码字不易 喜欢的话点赞 加个关注吧 后期还有很多干货等着你 最近一直在研究开源项目 发现对开源项目的开源许可有一些模糊 现在记录下来算是一个巩固 1 走进开源 开源 一词对应英文 Open So
  • Unity project 发布成Standalone EXE版本后,它的Debug infomation在什么位置

    一 Unity工程发布成Standalone Exe后 它的Debug 信息保存位置如下 二 示例 三 log文件
  • Openwrt开发笔记(3)—— 修改路由的网关地址和无线SSID 密码

    修改网关地址 一般来说默认的网关地址是192 168 1 1 如果我们想要定制自己的网关地址的话 可以选择在刷机后使用web配置页进行修改 或者通过指令进行修改 对于项目开发者而言 在源码中修改更加符合要求 轩面介绍指令修改和源码修改的2中
  • MQTT协议-使用CONNECT报文连接阿里云

    使用网络调试助手发送CONNECT报文连接阿里云 参考 https blog csdn net daniaoxp article details 103039296 在前面文章介绍了如何组装CONNECT报文 以及如何计算剩余长度 CONN
  • anaconda换源和pip换源

    在开发中我们经常会用到第三方的包 但是由于墙的限制导致了下载国外的包 普遍偏慢 这里我们可以修改为国内的镜像源 下载速度自然就会快起来 一 pip换源 国内的镜像源有很多 但是好用的就是阿里和清华的 这里我们选择清华的镜像源 别问为什么 问
  • 全网最强,Python接口自动化测试实战-接口参数关联(购物实例)

    目录 导读 前言 一 Python编程入门到精通 二 接口自动化项目实战 三 Web自动化项目实战 四 App自动化项目实战 五 一线大厂简历 六 测试开发DevOps体系 七 常用自动化测试工具 八 JMeter性能测试 九 总结 尾部小
  • element ui的upload 手动上传头像(复制就能用)

    之前在网上看了好多 结果给的代码都不全 整了快一天 才整好 心态都崩了 想砸电脑 这里贴出来愿后来人省力 下面的代码除了最下面的axios请求需要和自己的匹配之外 其他的可以直接复制使用了 服务器接口处理函数 这里只是处理函数 其余的部分没
  • 2020软件测试最新视频教程大合集汇总

    软件测试入门教程分享给你 软件测试工程师需要适当掌握一些技能 如操作系统 WIN UNIX这个你可以有针对性的去找着学数据库 常见的有SQLSERVER ORACLE 熟悉常用的编程语言 C C JAVA测试工具 这个就比较多一些 建议循序
  • js逆向——破解百度翻译

    针对进行了ajax加载的网页 有两种方法去爬取它当中的内容 1 使用selenium进行模拟浏览器进行选择元素 然后进行爬取 这种方法最简单 但是牺牲了速度 爬虫关键就在速度 因此针对大量的数据的话 就远远不能满足了 2 使用js逆向破解
  • 解决:IE浏览器打开就自动最小化,无法打开

    方法一 先把所有的IE窗口关了 只打开一个IE窗口 最大化这个窗口 关了它 OK 以后的默认都是最大化的了 方法二 先关闭所有的IE浏览器窗口 用鼠标右键点击快速启动栏的IE浏览器图标 在出现的快捷菜单中点击 属性 系统随即弹出 启动Int
  • JavaScript cookie实现html的select标签刷新后不回到默认值而是保持之前选择值

  • devops-1-docker安装

    TOC源码安装docker yum安装 查看信息 curl o etc yum repos d Centos 7 repo http mirrors aliyun com repo Centos 7 repo yum mache cat e
  • 关于运行PR提示vcruntime140.dll无法继续执行代码的4个解决方法分享

    关于运行安 PR提示vcruntime140 dll无法继续执行代码的困扰 小编将为您提供详细的解决方法 在此之前 我们需要了解一下vcruntime140 dll文件的作用 vcruntime140 dll 是 Visual C Redi
  • 一个U盘制作多个系统镜像方法 ——适用于ARM架构UOS和KYLIN银河麒麟系统

    一个U盘制作多个系统镜像方法 适用于ARM架构UOS和KYLIN银河麒麟系统 一 背景 作为一个喜欢收集系统镜像的同学 加起来收集的ARM架构和X86架构系统镜像少则10个 每装一次系统都要刻录一次U盘 且等待刻录的时间也挺让人着急 为了尽
  • 使用EF Core 连接远程oracle 不需要安装oracle客户端方法

    连接字符串 Data Source DESCRIPTION ADDRESS PROTOCOL TCP HOST IP地址 PORT 1521 CONNECT DATA SERVICE NAME orcl Persist Security I
  • Jetpack-Compose 学习笔记(五)—— State 状态是个啥?又是新概念?

    系列第五篇 进入 Compose 中有关 State 状态的学习 前面几篇笔记讲了那么多内容 都是基于静态界面的展示来说的 即给我一个不变的数据 然后将它展示出来 如何在 Compose 中构建一个随数据而变化的动态界面呢 相信看完这篇就知

随机推荐

  • 【Vue】学习笔记-数据交互

    Vue 学习笔记 数据交互 概述 安装axios 通过axios向后台获取数据 数据交互的实现 常见错误总结 概述 基于Vue的web项目显示的所有服务端数据 都是通过Ajax获取的 官方推荐使用Axios作为Ajax库 所以本文主要讲解在
  • centos6.8升级内核

    centos6 8升级内核 1 查看内核版本命令 uname r 2 更新nss yum update nss 3 安装elrepo的yum源 升级内核需要使用elrepo的yum源 在安装yum源之前还需要我们导入elrepo的key r
  • Python使用腾讯云-短信服务发送手机短信

    目前 腾讯云短信 为客户提供 国内短信 国内语音 和 海外短信 三大服务 腾讯云短信SDK支持以下操作 国内短信 国内短信支持操作 指定模板单发短信 指定模板群发短信 拉取短信回执和短信回复状态 海外短信 海外短信支持操作 指定模板单发短信
  • 机器学习-分类模型-逻辑分类(2)

    逻辑分类简要概念 逻辑分类实际上是基于线性回归 sigmoid的一个分类器 二分类代码 import numpy as np import matplotlib pyplot as plt import sklearn linear mod
  • 一场时代的挑战与转变

    在我们的社会中 有一种现象引起了人们广泛的关注 那就是 年轻人存款 的问题 据最近的一项调查显示 大概五分之一的年轻人存款在一万元以内 10万元存款是一个 坎 存款超过10万就会超过53 7 的人 这样的数据 无疑引发了人们对于年轻人与存款
  • QT之动态库的创建、及测试代码编写

    1 新建文件和目录 在项目中选择library 右侧选择C library 如下图所示 2 按choose后 出现下面如图所示 添加库工程名字 3 选择共享库 并最好修改类名 头文件 源文件的名称 如下图所示 4 选择编译器 这里需要跟需要
  • 正则表达式之匹配字符串双引号

    字符串中可以出现转义的双引号 那么一般的正则表达式就不行了 譬如 无法正确匹配 word1 word2 word3 其结果是 word2 这里我用非获取匹配 则结果是 word2 word3 表示贪婪策略 非贪婪 pattern 非获取匹配
  • 最新Navicat Premium 16 激活中文版 适用于win和mac版

    Navicat Premium 16这是十分知名且专业的数据库开发管理工具 利用它不仅为用户提供完善的工具 可以轻松完美的帮助用户构建 管理和维护您的数据库 还与市面上主流的云数据库兼容 从而可以很好的满足不同用户们的各种使用需求 同时就算
  • element el-table 设置行高

  • Python从零开始学大概需要多久时间才能达到自主接单赚钱水平?

    我能也是学Python将近六七年的时间了 就来给大家讲讲Python吧 Python作为现在行业最受欢迎的编程语言 也是一门相对于其他的编程语言 Java C C 要更加简单 狗头保命 这是有目共睹的 那么因为Python的简单 所以现在学
  • router的使用

    路由和线路 路由router 表示当前项目全局的路由实例对象 跳转方法 push replace go back 线路route 表示当前路由页面的信息对象 获取动态路由的参数 params router跳转的两种方式 js跳转叫 编程式跳
  • 如何搭建VPN?

    搭建VPN的方法可以分为两个主要步骤 设置服务器和配置客户端 下面是一般的步骤 设置服务器 1 选择适合你需求的服务器 你可以租用云服务器 自行搭建服务器或者使用第三方VPN服务提供商 2 安装操作系统并进行基本配置 常用的操作系统有Lin
  • 如何安装黑苹果双系统

    title 黑苹果Win10双系统安装教程 小白也能秒掌握 装机装了一天 看了很多教程 踩了无数坑 终于成功了 写一篇教程防止后人踩坑吧 关于黑苹果 折腾过的人应该不陌生 自从苹果采用 Intel 的处理器 被解锁后可以安装在 Intel
  • 【前端兼容性】常见的浏览器兼容问题及解决方案

    常见浏览器兼容 前言 一 常见浏览器内核 1 Trident内核 2 Gecko内核 3 Blink内核 4 Webkit内核 5 Presto内核 已废弃 二 常见兼容性问题 1 不同浏览器的默认margin和padding不一致 2 图
  • PyQty5—第四课:GUI小程序界面设计(附完整代码)

    在第一节课中我们已经学会了PyQty5的安装 以及配置好了两个环境 如果还没有看到的小伙伴可以前去考古 点我 今天我们将会继续学习PyQty5的设计界面的认识 也会带领大家一步一步设计出一个小GUI作品 首先我们创建一个py文件 然后右击
  • OpenGL学习日记-2015.3.13——多实例渲染

    实例化 instancing 或者多实例渲染 instancd rendering 是一种连续执行多条相同渲染命令的方法 并且每个命令的所产生的渲染结果都会有轻微的差异 是一种非常有效的 实用少量api调用来渲染大量几何体的方法 OpenG
  • activiti在运行时报错:couldn‘t find a variable type that is able to serialize XXX

    activiti在启动流程实例的时候报错信息如下 Exception in thread main org activiti engine ActivitiException couldn t find a variable type th
  • 【精品源码】C#20个经典小游戏集合!

    大家好 这里是小伙整理的C 20个经典小游戏集合系列 需要的可自取下载包 C 20个经典小游戏集合项目包含内容 小游戏源码目录如下 01 21点小游戏 02 百变方块小游戏 03 打字小游戏 04 单机坦克小游戏 05 对对碰小游戏 06
  • pybind11学习

    本文主要记录官方文档中 FUNCTIONS 一章的学习笔记 对于C 函数的Python绑定 在前面的学习中已经有所涉及了 详见 pybind11学习 迈出第一步 本文主要是记录一些更加深入的知识 文章目录 1 返回值策略 2 调用策略 2
  • vue中,实现锚点定位及跳转(url不发生变化)

    直接上代码 lt div class footer click returnTop gt methods returnTop function document querySelector header scrollIntoView tru