公司做网站一定要钱吗,腾讯云备案域名,网站二维码怎么做,wordpress前台显示英文项目场景
点击页脚“联系我们”链接#xff0c;跳转到对应页面的“联系我们”模块。 问题描述
在页脚处“联系我们”代码如下#xff1a;
a href/about_us#contactUs联系我们/a在“联系我们”的组件中写以下代码#xff1a;
export default…项目场景
点击页脚“联系我们”链接跳转到对应页面的“联系我们”模块。 问题描述
在页脚处“联系我们”代码如下
a href/about_us#contactUs联系我们/a在“联系我们”的组件中写以下代码
export default function ContactUs() {const scrollToContactUs () {const contactUs document.getElementById(contactUs);if (window.location.hash.indexOf(#contactUs) -1 contactUs) {contactUs.scrollIntoView(true);}};useEffect(() {scrollToContactUs();}, []);return (div idcontactUs// 这里是组件内容/div);
}页面初始化时并不会定位到“联系我们”模块。即便代码在能获取到 contactUs 元素的情况下调用 scrollIntoView 依然不生效。 解决方案
使用 window.requestAnimationFrame() 方法。 该window.requestAnimationFrame()方法告诉浏览器您希望执行动画。它请求浏览器在下次重绘之前调用用户提供的回调函数。 export default function ContactUs() {const scrollToContactUs () {const contactUs document.getElementById(contactUs);if (window.location.hash.indexOf(#contactUs) -1 contactUs) {window.requestAnimationFrame(() {contactUs.scrollIntoView(true);})}};useEffect(() {scrollToContactUs();}, []);return (div idcontactUs// 这里是组件内容/div);
}
