[英]Next.js - Disable jump to anchor when using router.push()
使用 next 10.2
,每次我们将带有 hash 的 URL 推送到路由器时,下一步就是跳转到锚元素。
import {useRouter} from 'next/router'
router.push('/contact#about-us');
如果我禁用scroll
也会发生这种情况
router.push('/contact#about-us', undefined, { scroll: false });
我想平滑滚动到锚元素,而不是将其委托给 next.js。
import React from 'react'
import {useRouter} from 'next/router'
import PropTypes from "prop-types";
const LinkSmoothScroll = ({href, className, children}) => {
const router = useRouter()
const linkClicked = (e) => {
e.preventDefault();
router
.push(href, undefined, {scroll: false})
.then(() => {
const el = document.getElementById(href);
if ( typeof el !== "undefined" ) {
// Since header element is fixed, and document height is not being
// affected by fixed/absolute elements, we need to consider this
// on the margin to be applied.
const headerHeight = document.getElementById("nav-header")?.scrollHeight || 0;
const scrollTopY = el.top + window.scrollY - headerHeight;
window.scrollTo({
left: el.left,
top: scrollTopY,
behavior: 'smooth'
});
}
});
}
return (
<a href={href} className={className} onClick={linkClicked}>{children}</a>
)
}
LinkSmoothScroll.propTypes = {
href: PropTypes.any,
children: PropTypes.string,
className: PropTypes.string
}
export default LinkSmoothScroll;
我没有找到任何方法来禁用此行为,也没有找到避免它的调整。
几个想法。
html {
scroll-behavior: smooth;
}
通过在 hash 中为 ID 添加前缀来避免浏览器行为,因此在页面中找不到匹配的元素( #about-us
变为#prefix-about-us
)。 然后在导航上解析它并用JS滚动到它。
在我看来,这两种方法都不是很好,如果可能的话,最好保持默认行为不变。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.