锚点定位且不改变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. 搜狗微信采集 —— python爬虫系列一

    前言:一觉睡醒,发现原有的搜狗微信爬虫失效了,网上查找一翻发现10月29日搜狗微信改版了,无法通过搜索公众号名字获取对应文章了,不过通过搜索主题获取对应文章还是可以的,问题不大,开搞! 目的:获取搜狗 ...

  2. [BZOJ4456][ZJOI2016]旅行者:分治+最短路

    分析 类似于点分治的思想,只统计经过分割线的最短路,然后把地图一分为二. 代码 #include <bits/stdc++.h> #define rin(i,a,b) for(regist ...

  3. 4.Python IDLE使用方法详解(包含常用快捷键)

    在安装 Python 后,会自动安装一个 IDLE,它是一个 Python Shell (可以在打开的 IDLE 窗口的标题栏上看到),程序开发人员可以利用 Python Shell 与 Python ...

  4. 对AC自动机+DP题的一些汇总与一丝总结 (1)

    (1)题意 : 输入n.m.k意思就是给你 m 个模式串,问你构建长度为 n 至少包含 k 个模式串的方案有多少种 分析:(HDU2825) DP[i][j][k] 表示 DP[第几步][哪个节点结尾 ...

  5. Oracle JET 使用RequireJS第三方工具或库引入

    在 Oracle JET 应用程序中使用 RequireJS 添加第三方工具或库. 步骤: 1.如果使用工具框架脚手架,需要一下操作. a.使用 npm 安装你需要的库. npm install my ...

  6. 五大主流数字币钱包:imToken数字货币钱包,Bitcoin core钱包,BTS网页版钱包,AToken轻钱包,Blockchain

    AToken数字货币钱包 超容易上手支持五大主流币种   互联网 | 编辑: 王静涛 2017-12-28 09:58:33转载     国家监管部门已叫停数字货币交易,包括火币网.比特币中国.OKC ...

  7. 卡死浏览器使IPhone的自带safari打开重启的JS循环代码

    <html> <body> <script> var total=""; for (var i=0; i < 1000000; i++) ...

  8. WPF SAP水晶报表例子和打包Setup

    <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=" ...

  9. 博客侧边栏公告html代码

    前一小段是时钟: 后一段是百度统计,但是显示不出来. 网站概况 - 百度统计 https://tongji.baidu.com/web/25880379/overview/index 趋势分析 - 百 ...

  10. 移动端自动化==>什么是Appium

    转自:http://www.imdsx.cn/ 手机App分为两大类,原生App(Native App)和混合APP(Hybrid App) 原生App(Native App) 原生App实际就是我们 ...