锚点定位且不改变url

html

事件触发
<li v-for="(item,index) in couponsList.swaps" :key="index" @click="toTegional(index)">{{regionalList[index]}}</li>

1
2
锚点埋藏
<div v-for="(item,index) in couponsList.swaps" :key="index" :id="'price'+index">

1
2
JavaScript

toTegional(index) {
let id = '#price' + index;
document.querySelector(id).scrollIntoView(true);
},

锚点定位且不改变url地址的更多相关文章

  1. asp.net core 2.2 根据PC端和移动端自动显示不同视图而不改变url地址

    1.添加HttpRequest扩展方法 public static class RequestExtensions { //regex from http://detectmobilebrowsers ...

  2. 使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置

    使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...

  3. thinkphp的url地址区分大小写?

    在默认情况下: 在访问url地址的时候, 其中的 Action类名 即: 模块名称 是区分大小写的. (只有模块名, 即控制器名称) 可以根据设置 'URL_CASE_INSENSITIVE' =&g ...

  4. 获取网页URL地址及参数等的两种方法(js和C#)

    转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...

  5. 通过history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  6. history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  7. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  8. html页面内锚点定位及跳转方法总结

    1.最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head><style& ...

  9. 【面试题】如何去掉vue的url地址中的#号?及其原理?

    如何去掉vue的url地址中的#号?及其原理? 点击打开视频讲解更加详细 如何去掉vue的url地址中的#号? import Vue from 'vue'; import VueRouter from ...

随机推荐

  1. D5000系统使用手册--AVC

    有关概念: AVC:自动电压控制 PAS:网络分析应用 SCADA:电网稳态监控应用 闭环:AVC由SCADA系统获得电网的实时运行状态,分析计算后发出控制指令,电网运行状态变化后反馈回AVC,形成闭 ...

  2. (四)mysql -- 常用函数

    今天get一个,先记录一下 以后慢慢补充~ 将varchar转换成int 例如:select * from tb_1 order by cast(sport_sum as unsigned integ ...

  3. legend3---Homestead常用操作代码

    legend3---Homestead常用操作代码 一.总结 一句话总结: 在虚拟机里面改变文件windows里面也会变,在windows里面改变虚拟机里面也会变,所以可以在windows里面编程或者 ...

  4. WIN10下安装Linux子系统并安装xface4界面

    WIN10下安装Linux子系统并安装xface4界面,使用win10自带的远程桌面工具登陆成功. 成功截图: 安装步骤 1.安装[适用于Linux的Windows子系统]组件 2.win10应用商店 ...

  5. Centos 建一个指定大小的文件夹

    1.使用ramdisklinux可以把一部分内存mount为分区使用,通常为称为ramdisk,分为ramdisk, ramfs, tmpfs.可以一条命令实现我们的需求:mount none tes ...

  6. Eclipse高版本无法兼容FatJar的问题解决

    发现eclipse打包jar无法连带打包第三方lib,于是选择安装插件fatjar,现在说明fatjar安装过程: 1.安装方法:   1)下载安装:   https://sourceforge.ne ...

  7. 《ECMAScript6 入门》

    NVM Babel babel-core:提供 Babel 的 API,可以获得转码后的代码和抽象语法树. babel-polyfill:Babel 只能转换语法,如果想用类似 Promise.Gen ...

  8. GitHub - 解决 GitHub Page 404

    带有下划线的文件报 404 解决:在仓库文件夹根目录添加.nojekyll文件 参见: Bypassing Jekyll on GitHub Pages - The GitHub Blog How t ...

  9. 使用C#分层查询多个表数据

    下面我来给大家叙述一下视野分层加载多张表数据: 首先创建一个StudentExtends类: 在DAL层studentDAL类写如下代码: 在BLL层写如下代码,引用DAL层的LoadStudentI ...

  10. python3+selenium常用语法汇总

    Selenium常用语法总结 一.Selenium常用定位语法 1.元素定位 (1)ID定位元素: find_element_by_id(‘’) (2)通过元素的类名称定位元素: find_eleme ...