如何通过Nuxt中的散列流畅地滚动到元素？ [英] How to smoothly scroll to an element via a hash in Nuxt?
本文介绍了如何通过Nuxt中的散列流畅地滚动到元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我的目标是使用Nuxt.js创建一个锚定链接菜单，该菜单滚动到用户单击的页面部分，现在我几乎没有不同的方法可以做到这一点，但是我不确定哪种是正确的方法。
选项1：
我创建了一个菜单，该菜单获取div部分的offsetTop，以了解当用户单击菜单中的链接时滚动多远，但是我遇到的问题是，当我将项目推送到服务器时，div的值(如offsetHeight和offsetTop)很少发生变化，我不确定是什么导致了这种情况。因此，链接会滚动到错误位置，并且无法正常工作。
注意：我尝试与部分Value和Problem互换位置，之后效果很好，但我仍然需要将Value部分放在Problem之上。
在这里，我使用Created()获取值并将其设置为Vuex状态，然后使用菜单所在的另一个组件中的值及其所有功能：
var elements = [
{name: 'Intro', el: document.getElementById('intro')},
{name: 'About', el: document.getElementById('about')},
{name: 'Process', el: document.getElementById('process')},
{name: 'Value', el: document.getElementById('value')},
{name: 'Problem', el: document.getElementById('problem')},
{name: 'Contact', el: document.getElementById('contact')}
]
var bodyScrollTop = document.body.scrollTop
elements.forEach((element) => {
console.log(element)
var name = element.name
var el = element.el
var posTop = el.offsetTop - bodyScrollTop
var elementHeight = el.offsetHeight
var posBottom = posTop + elementHeight
this.$store.state.windows.forEach((window) => {
if(window.id == name) {
window.posTop = posTop
window.posBottom = posBottom
console.log('PosTop', window.id, window.posTop)
console.log('PosBottom', window.id, window.posBottom)
}
})
})
我使用window.scllTo()滚动到部分：
if (process.client) {
window.scrollTo({
top: position,
left: 0,
behavior: 'smooth'
});
}
以下是本地计算机上具有正确值的div规范：
accessKey: ""
align: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
ariaCurrent: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
ariaHasPopup: null
ariaHidden: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
ariaSort: null
ariaValueMax: null
ariaValueMin: null
ariaValueNow: null
ariaValueText: null
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: id, 1: class, 2: data-v-2a183b29, id: id, class: class, data-v-2a183b29: data-v-2a183b29, length: 3}
autocapitalize: ""
autofocus: false
baseURI: "http://localhost:3000/"
childElementCount: 2
childNodes: NodeList(3) [div.sidebar-content, text, div.section-content.problem-content]
children: HTMLCollection(2) [div.sidebar-content, div.section-content.problem-content]
classList: DOMTokenList(2) ['section', 'problem', value: 'section problem']
className: "section problem"
clientHeight: 766
clientLeft: 0
clientTop: 0
clientWidth: 1290
contentEditable: "inherit"
dataset: DOMStringMap {v-2a183b29: ''}
dir: ""
draggable: false
elementTiming: ""
enterKeyHint: ""
firstChild: div.sidebar-content
firstElementChild: div.sidebar-content
hidden: false
id: "problem"
innerHTML: "..."
innerText: "..."
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: div.section-content.problem-content
lastElementChild: div.section-content.problem-content
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: div#contact.section.contact
nextSibling: text
nodeName: "DIV"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 766
offsetLeft: 0
offsetParent: div.v-application--wrap
offsetTop: 3390
offsetWidth: 1290
onabort: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onbeforexrselect: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerrawupdate: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontouchcancel: null
ontouchend: null
ontouchmove: null
ontouchstart: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkittransitionend: null
onwheel: null
outerHTML: "..."
ownerDocument: document
parentElement: div#cridty
parentNode: div#cridty
part: DOMTokenList [value: '']
prefix: null
previousElementSibling: div#value.section.value
previousSibling: text
scrollHeight: 766
scrollLeft: 0
scrollTop: 0
scrollWidth: 1290
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
tabIndex: -1
tagName: "DIV"
textContent: "..."
title: ""
translate: true
virtualKeyboardPolicy: ""
[[Prototype]]: HTMLDivElem
以下是scroll()函数在本地计算机的菜单组件中使用的对象，用于定义滚动位置、链接何时活动以及何时不活动：
active: (…)
hash: (…)
id: (…)
posBottom: 4128
posTop: 3385
以下是Ubuntu服务器上更改了值的div规格：
accessKey: ""
align: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
ariaCurrent: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
ariaHasPopup: null
ariaHidden: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
ariaSort: null
ariaValueMax: null
ariaValueMin: null
ariaValueNow: null
ariaValueText: null
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: id, 1: class, 2: data-v-dcd49e84, id: id, class: class, data-v-dcd49e84: data-v-dcd49e84, length: 3}
autocapitalize: ""
autofocus: false
baseURI: "..."
childElementCount: 2
childNodes: NodeList(3) [div.sidebar-content, text, div.section-content.problem-content]
children: HTMLCollection(2) [div.sidebar-content, div.section-content.problem-content]
classList: DOMTokenList(2) ['section', 'problem', value: 'section problem']
className: "section problem"
clientHeight: 748
clientLeft: 0
clientTop: 0
clientWidth: 1290
contentEditable: "inherit"
dataset: DOMStringMap {vDcd49e84: ''}
dir: ""
draggable: false
elementTiming: ""
enterKeyHint: ""
firstChild: div.sidebar-content
firstElementChild: div.sidebar-content
hidden: false
id: "problem"
innerHTML: "..."
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: div.section-content.problem-content
lastElementChild: div.section-content.problem-content
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: div#contact.section.contact
nextSibling: text
nodeName: "DIV"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 748
offsetLeft: 0
offsetParent: div.v-application--wrap
offsetTop: 3340
offsetWidth: 1290
onabort: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onbeforexrselect: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerrawupdate: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontouchcancel: null
ontouchend: null
ontouchmove: null
ontouchstart: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkittransitionend: null
onwheel: null
outerHTML: "..."
ownerDocument: document
parentElement: div#cridty
parentNode: div#cridty
part: DOMTokenList [value: '']
prefix: null
previousElementSibling: div#value.section.value
previousSibling: text
scrollHeight: 748
scrollLeft: 0
scrollTop: 0
scrollWidth: 1290
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
tabIndex: -1
tagName: "DIV"
textContent: "..."
title: ""
translate: true
virtualKeyboardPolicy: ""
[[Prototype]]: HTMLDivElem
这是对象的控制台日志，scroll()函数在服务器的菜单组件中使用它来定义滚动位置、链接何时活动以及何时不活动：
active: (…)
hash: (…)
id: (…)
posBottom: 3484
posTop: 2736
只有一个部分不起作用，其他的都很好。
选项2：
我尝试的第二种方法是使用锚定链接，当单击菜单中的链接时，我让它滚动到右侧部分，但现在的问题是，当用户滚动到某个部分时，我需要更改散列是url。我尝试使用this.$router.push({path: element.hash})更改URL。当用户输入节时，URL会更改，但问题是每次运行$router.ush时，滚动体验都会变得非常糟糕，因为它会在用户向下滚动到新节时尝试回滚到节。
现在我在这两个之间跳跃，不知道哪一个会是更好的选择来投资我的时间。
推荐答案
您在这里正在执行一些相当复杂的操作，这些操作在不同的浏览器中可能会有所不同。我建议坚持Vue方法，而不是这里的香草JS。
我实现了本地工作卷轴，这要归功于我的previous answer和/pages/index.vue中的以下内容
<template>
<div>
<button
v-scroll-to="{ el: '#scroll-here', duration: 300 }"
@click="$router.push({ name: 'index', hash: '#scroll-here' })"
>
Let's scroll !!
</button>
<nuxt-link to="/about">go to about page</nuxt-link>
<p class="big-block">
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
</p>
<p id="scroll-here">scroll smooth to here please</p>
<p class="big-block">
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
</p>
</div>
</template>
<script>
export default {
name: 'Index',
}
</script>
<style>
.big-block {
min-height: 100vh;
}
</style>
我们导入vue-scrollto并使用它作为输出ID的目标，所有可用选项都是available here。
如果我们用/app/router.scrollBehavior.js
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)
export default function (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (to.hash === '#scroll-here') {
VueScrollTo.scrollTo('#scroll-here', 300, { easing: 'linear' })
}
}, 10)
})
}
我不确定您是(可能)需要每个按钮的本地解决方案，还是需要更广泛的全局解决方案。
局部+全局滚动解决方案可以是found here(稍微缩小视口)。
相关回购为available here。
这篇关于如何通过Nuxt中的散列流畅地滚动到元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
