锚点定位且不改变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. Spring Cloud云架构 - SSO单点登录之OAuth2.0登录流程(2)

    上一篇是站在巨人的肩膀上去研究OAuth2.0,也是为了快速帮助大家认识OAuth2.0,闲话少说,我根据框架中OAuth2.0的使用总结,画了一个简单的流程图(根据用户名+密码实现OAuth2.0的 ...

  2. js控制手机保持亮屏的库,解决h5移动端,自动息屏问题

    一些说明:我用Laya(ts)开发小游戏,有需要保持手机屏幕常亮的需求(非必须的),然后作为小白的我就在网上找到了这个库,大概了解下,应该是通过播放空视频的原理来保持手机屏幕常亮,然后就放到项目中试了 ...

  3. CSS 阴影应用

    1.背景阴影的使用 box-shadow:1px 1px 1px 1px #ccccccc inset; 说明:第一个参数为水平阴影的大小.第二个为垂直阴影的大小(值可以为负数).第三个参数是阴影模糊 ...

  4. 安装mariadb报错: Job for mariadb.service failed because the control process exited with error code. See "systemctl status mariadb.service" and "journalctl -xe" for details.

    卸载和删除都使用过了,没有起到效果,然后用了如下的方案,进行解决: CentOS 从 Yum 源安装配置 Mariadb 2017.03.01 WangYan 学习笔记  热度 7℃ 一.安装 Mar ...

  5. Mybatis 一对多 关联查询查询

    一对多 与 一对一 查询有许多相似之处. 最主要的区别是 查询结果是list,与之对应的标签为collection. 班级和学生,一个班有多个学生,而每个学生只能属于一个班. 此时班级编号作为学生表的 ...

  6. legend3---PHP使用阿里云短信服务

    legend3---PHP使用阿里云短信服务 一.总结 一句话总结: 使用步骤照官方文档,代码拷贝即可 1.php使用阿里云短信服务的步骤? 入驻阿里云->开通短信服务->获取Access ...

  7. 请简述一下 Ajax 的原理及实现步骤

    简述 AJAX:AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行 ...

  8. kaptcha Spring 整合

    转自:http://my.oschina.net/CandyDesire/blog/209364 生成验证码的方式有很多,个人认为较为灵活方便的是Kaptcha ,他是基于SimpleCaptcha的 ...

  9. Scala的to和until

    object test03 { def main(args: Array[String]): Unit = { //to 每次迭代为1 val to1= to print("to1" ...

  10. bzoj3028食物 关于(1+x+x2+x3+x4+...)^k的第i项系数就是c(i+k−1,k−1)的证明

    关于(1+x+x2+x3+x4+...)^k的第i项系数就是c(i+k−1,k−1)的证明对于第i项,假设为5x^5=x^0*x^5x^5=x^1*x^4x^5=x^2*x^3........也就是说 ...