Html Vue.js 锚定到同一组件内的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42645964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js anchor to div within the same component
提问by fmlopes
I'm developing a Vue.js application and I'm having trouble to link an anchor to a certain div within a component.
我正在开发 Vue.js 应用程序，但无法将锚点链接到组件内的某个 div。
I have the following anchor:
我有以下锚点：
<a href="#porto" class="porto-button">Porto, Portugal</a>
and the following div:
和以下div：
<div id="porto" class="fl-porto">
I'm using vue-router in hash mode.
我在哈希模式下使用 vue-router。
The problem is, whenever I click the "porto-button" it will redirect me to the "home" page ( ' / ' )
问题是，每当我单击“porto-button”时，它都会将我重定向到“主页”页面（ ' / ' ）
I'm using Vue.js 1.X and I tried using history mode (URL without the hashbang) but it gives me a cannot GET '/page'error upon refreshing a page.
我正在使用 Vue.js 1.X，我尝试使用历史模式（不带 hashbang 的 URL），但它cannot GET '/page'在刷新页面时出现错误。
Am I doing something wrong? What can I do about this?
难道我做错了什么？我该怎么办？
回答by euvl
Because you are using router in hash mode, you will not be able to scroll that easily because scrolling to /#somethingwill actually redirect you to 'something' page.
因为您在散列模式下使用路由器，所以您将无法轻松滚动，因为滚动到/#something实际上会将您重定向到“某物”页面。
You will have to emulate scrolling behaviour on your own, try doing something like that:
您必须自己模拟滚动行为，请尝试执行以下操作：
//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.
//Your view:
<a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">
//Your code:
methods: {
scrollMeTo(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
How it works:
这个怎么运作：
- Set the references through
refattribute to the element you would like to scroll to; - Write a function that will programmatically set
window.scrollYto thetopof the referenced element. - Job is done :)
- 将通过
ref属性的引用设置为要滚动到的元素； - 编写一个函数，以编程方式设置
window.scrollY为top引用元素的 。 - 工作完成了:)
Update 1:
更新 1：
jsfiddle https://jsfiddle.net/5k4ptmqg/4/
jsfiddle https://jsfiddle.net/5k4ptmqg/4/
Update 2:
更新 2：
Seems that in Vue 1 ref="name"looked like el:name(docs), here is an updated example:
似乎在 Vue 1 中ref="name"看起来像el:name(docs)，这是一个更新的示例：
回答by Cathy Ha
Another method is to use "scrollIntoView()"
另一种方法是使用“scrollIntoView()”
So, euvl's code still stands, except you would change the method slightly:
因此，euvl 的代码仍然有效，除非您稍微更改方法：
new Vue({
el: '#app',
methods: {
goto(refName) {
var element = this.$els[refName];
element.scrollIntoView();
}
}
})
If you wanted to get fancy and make the scroll smooth, you can even add the following:
如果您想花哨并使滚动平滑，您甚至可以添加以下内容：
element.scrollIntoView({ behavior: 'smooth' });
Note that this will need a polyfill for older browsers.
请注意，这将需要旧浏览器的 polyfill。
回答by Arlan T
What worked for me
什么对我有用
<router-link to="#leaders">Leaders</router-link>
or dynamic
或动态
<router-link :to="`#${subMenuItem.linkTarget}`" class="page-submenu-list__link">
{{subMenuItem.linkTitle}}
</router-link>
in router
在路由器中
routes:[],
scrollBehavior (to, from, savedPosition) {
//https://router.vuejs.org/guide/advanced/scroll-behavior.html
if (to.hash) {
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
}
}
回答by Cato Minor
An alternative solution is to use the v-scroll-todirective (webpage, github).
I find this solution to be clean, simple, flexible and effective. To use:
另一种解决方案是使用v-scroll-to指令（网页，github）。我发现这个解决方案干净、简单、灵活且有效。使用：
Install it:
npm install --save vue-scrolltoHave Vue 'use' it:
var VueScrollTo = require('vue-scrollto'); Vue.use(VueScrollTo)Apply it as a directive in your Vue component's template:
<a href="#" v-scroll-to="'#element'">Scroll to #element</a> <div id="element"> Hi. I'm #element. </div>Or apply it programmatically in your Vue component's methods:
this.$scrollTo('#element', 500, { easing: 'ease-in-out' })Or apply it programmatically in your Vuex actions:
import { scrollTo } from 'vue-scrollto' scrollTo('#element', 500, { easing: 'ease-in-out' })
安装它：
npm install --save vue-scrollto让 Vue '使用'它：
var VueScrollTo = require('vue-scrollto'); Vue.use(VueScrollTo)将其作为指令应用到 Vue 组件的模板中：
<a href="#" v-scroll-to="'#element'">Scroll to #element</a> <div id="element"> Hi. I'm #element. </div>或者以编程方式在 Vue 组件的方法中应用它：
this.$scrollTo('#element', 500, { easing: 'ease-in-out' })或者在你的 Vuex 操作中以编程方式应用它：
import { scrollTo } from 'vue-scrollto' scrollTo('#element', 500, { easing: 'ease-in-out' })
