锚点定位且不改变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. 详细讲解Android中的Message的源码

    相信大家对于Android中的Handler是在为熟悉不过了,但是要知道,Handler就其本身而言只是一个壳子,真正在内部起到作用的是Message这个类,对于Message这个类,相信大家也不会陌 ...

  2. (65)CRC32校验C语言版本

    #include<iostream> # include <stdio.h> # include <string.h> typedef unsigned int u ...

  3. (52)LINUX应用编程和网络编程之七Linux线程

    3.7.1.再论进程 3.7.1.1.多进程实现同时读取键盘和鼠标 3.7.1.2.使用进程技术的优势 (1)CPU时分复用,单核心CPU可以实现宏观上的并行.微观上的串行 (2)实现多任务系统需求( ...

  4. Spring Boot教程(二)关于RabbitMQ服务器整合

    准备工作 15min IDEA maven 3.0 在开始构建项目之前,机器需要安装rabbitmq,你可以去官网下载,http://www.rabbitmq.com/download.html ,如 ...

  5. struts2.3.20+spring4.0.2+hibernate4.3.4框架整合

    一.创建web工程,搭建Struts框架开发环境: 这里只导入了项目中所需要的重要的jar包,以后根据业务要求继续导入相关的包. 步骤1::导入struts框架所需的jar包 步骤2:在web.xml ...

  6. [CSP-S模拟测试]:取石子(博弈论+DP)

    题目描述 有三堆石子,它们的石子个数分别为$x,y,z$.$A$和$B$正在博弈,由$A$先手,双方轮流操作.每次操作是指,选择若干堆($1-3$堆)石子,从中各取出相同数量的石子(不能$1$个都不取 ...

  7. 探究重构代码(Code refactoring)

    Code refactoring 是什么 在不改变软件的外部行为的条件下,通过修改代码改变软件内部结构,将效率低下和过于复杂的代码转换为更高效.更简单和更简单的代码. 怎样执行Code refacto ...

  8. mvn deploy上传私服Nexus时遇到的坑--ReasonPhrase: Forbidden.

    用maven deploy上传jar包时,遇到了ReasonPhrase: Forbidden 错误,截图如下: 折腾了好久,终于解决,现把步骤简单记录如下: 1.自建仓库eagle-sky: 2.设 ...

  9. eclipse导出java项目jar包(依赖第三方jar包)

    一.在项目根目录下建一个文件:MANIFEST.MF 内容: Manifest-Version: 1.0 Class-Path: lib/commons-compress-1.9.jar lib/co ...

  10. windows下mingw编译faac

    进入目录先运行 ./bootstrap 接着就可以 ./configure --without-mp4v2 然后 make make install