Vue中如何正常使用锚点定位?-程序员宅基地

技术标签: java  vue  js  html  javascript  

问题:

项目中会有一些功能需要用到锚点定位,比如文章目录、点击标题跳转到正文内容等等。但vue的路由设置默认为hash模式,正常使用a标签的锚点定位,在浏览器刷新/后退/前进时,路由会匹配不上,导致页面无法正常渲染

解决方案:

方法一

在router配置里添加(亲测有效):

mode: 'history',
srcollBehavior(to,from,savedPosition){
    if(to.hash){
     return {
        selector:to.hash
      }
    }
 }

方法二:

定义点击事件

<template>
 <div>
  <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" @click="goAnchor('#anchor-'+index)" v-for="index in 20"> {
    {index}</a></div>
  <div :id="'anchor-'+index" class="item" v-for="index in 20">{
    {index}</div>
</div>
</template>
methods: {
  goAnchor(selector) {
     var anchor = this.$el.querySelector(selector)
     document.documentElement.scrollTop = anchor.offsetTop
  }
 }

方法三:

自定义指令

<template>
<div>
  <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-anchor="index" v-for="index in 20"> {
    {index}} </a></div>
  <div :id="'anchor-'+index" class="item" v-for="index in 20" >{
    {index}}</div>
</div>
</template>

main.js  定义全局指令  方便其他地方复用

Vue.directive('anchor',{
inserted : function(el,binding){
el.onclick = function(){
  document.documentElement.scrollTop = $('#anchor-'+binding.value).offset().top
}
}
})

方法四:

定义点击事件

document.querySelector(“要返回地方的id”).scrollIntoView(true);

<template>
    <div>
        <div id='header'></div>
        <div class='footer' @click='returnTop'></div>
    </div>
</template>
methods:{
  returnTop(){
   document.querySelector("#header").scrollIntoView(true);
  }
 }

拓展:

scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况。

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

参数为false时,使element的底部与视图(容器)底部对齐。

TIPS:页面(容器)可滚动时才有用!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_55560445/article/details/114420009

智能推荐

spring mvc 拦截器需要实现HandlerInterceptor接口_handlerinterceptor接口的方法-程序员宅基地

文章浏览阅读2.2k次。spring mvc 拦截器需要实现HandlerInterceptor接口 public class UserIsLoginInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, Htt_handlerinterceptor接口的方法

Spring中IOC容器概述与Bean的配置_在spring ioc容器中通过bean配置computer对象-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏4次。Spring中IOC容器概述与Bean的配置IOC容器概述IOC(Inversion of Control):其思想是反转资源获取的方向。传统的资源查找方式要求组件向容器发起请求查找资源。作为回应,容器适时地返回资源。Person p=new Person();而应用了IOC之后,则是容器主动地将资源推送给它所管理的组件,组件所要做的仅是选择一种合适的方式来接受资源。这种行为也被称为查找的被动形式..._在spring ioc容器中通过bean配置computer对象

【数据结构】自己实现一个栈_实现一个栈结构-程序员宅基地

文章浏览阅读248次。接口:package fwb.stack;/** * @program: Stack * @description: 栈 * @author: fwb * @create: 2019-05-26 14:10 **/public interface Stack<T> { /** * @Description: 入栈 * @Param: [t] ..._实现一个栈结构

ios静态库笔记-程序员宅基地

文章浏览阅读49次。本身IOS的开发,只允许静态库或者Framework。下面就简单写一个静态库和一个调用静态库的例子。1.静态库工程的建立:Xcode New一个新的project,选择IOS下面的Framework&Library,下面有一个Cocoa Touch Static Library。直接next去建立一个Print这样的工程。2.工程建立我们添加很简单的"- (void..._xamarin linkwith -objc ios 静态库

pycharm打不开怎么解决_pycharm只能cmd打开-程序员宅基地

文章浏览阅读9.1k次,点赞5次,收藏6次。前天晚上突然发现pycharm打不开了,经过一天一夜各种尝试,终于打开了最终打开方案win+r, 在输入框输入pycharm,就打开了。接下来写我尝试的各种方法。_pycharm只能cmd打开

安卓第一阶段实训:基于存储卡的音乐播放器V06日志(周璐)_filter = new intentfilter("music");-程序员宅基地

文章浏览阅读142次。文章目录1,创建应用界面2,设置界面布局资源(activity_main.xml)3,设置界面布局资源(activity_splash_screen.xml)4,将相应的所需的图片资源放入指定的位置5,编写有关于按钮操作的xml文件6,播放模式按钮模板(custom_border.xml)7,创建动画相关模板(animator.xml)8,创建相应的子包以及相应的类9,编写启动界面类(SplashScreenActivity)10,编写主界面类(MainActivity)11,AndroidManifest_filter = new intentfilter("music");

随便推点

TCP---之TCPSocket与TCPServer_idtcpserver serversocket 哪个稳定-程序员宅基地

文章浏览阅读1.3k次。QTcpSocket 详细描述:--------用于连接网络 QTcpSocket 类提供一个TCP套接字 TCP是一个面向连接,可靠的的通信协议,非常适合于连续不断的数据传递 QTcpSocket 是QAbstractSocket类非常方便的一个子类,让你创建一个TCP连接和数据流交流。注意:TCP套接字不能以QIODevice::Unbuffered模..._idtcpserver serversocket 哪个稳定

Quartz-Cluster配置属性配置_org.quartz.datasource配置信息-程序员宅基地

文章浏览阅读850次。1、主要配置属性名称 是否必选 类型 默认值 说明 org.quartz.scheduler.instanceName 否 String QuartzScheduler Schedule调度器的实体名字 org.quartz.scheduler.instanceId 否 String NON_CLUSTERED S..._org.quartz.datasource配置信息

HDOJ 1045 Fire Net_suppose that we have a square city with straight s-程序员宅基地

文章浏览阅读374次。Problem DescriptionSuppose that we have a square city with straight streets. A map of a city is a square board with n rows and n columns, each representing a street or a piece of wall. A block_suppose that we have a square city with straight streets. a map of a cit

C# list删除 另外list里面的元素_使用List中的remove方法遇到的坑,十个有九个踩-程序员宅基地

文章浏览阅读1.6k次。先来看一下下面的样例是否符合你的问题场景list中根据判断条件符合的就remove掉一个数据publicstaticvoidmain(String[]args){Listlist=newArrayList();CaseHeadcaseHead1=newCaseHead();caseHead1.setCaseid("a");..._c# list remove后仍然可访问

色弱不能学计算机的哪些专业,高考体检色弱色盲不能报哪些专业?-程序员宅基地

文章浏览阅读1.2k次。高考体检色弱色盲不能报哪些专业?高考体检检查最基本的项目包括内科、外科、眼科,包括色觉的检查,耳鼻喉科还有放射科,同时还做一个ALT的肝功能检查,就是转氨酶。高考体检时部分考生担心自己身体状况能不能过关,下面是高考体检色弱色盲不能报考的专业。高考体检色弱不能报考的专业点击查看:最新高考体检信息汇总高考体检色盲不能报考的专业色觉异常Ⅱ度(俗称色盲)不能报考的专业,除同轻度色觉异常外,还包括美术学、绘..._红绿色盲不可以学哪些计算机专业

Tensorflow2中load_weights的一些研究-程序员宅基地

文章浏览阅读8.8k次,点赞3次,收藏6次。假设我们定义了一个keras模型,并且使用它的save_weights函数保存了一些参数.现在我们只定义这个模型的一部分,并且使用load_weights去加载我们保存的这个完整的模型,会发生什么?首先看源代码,load_weights实际上是调用了tensorflow_core/python/keras/engine/network.py文件中Network类的load_weights函数,..._load_weights

推荐文章

热门文章

相关标签