时间戳

首页 > 解决方案 > 有没有办法将用户从一个页面重定向到另一个页面的底部

reactjs - 有没有办法将用户从一个页面重定向到另一个页面的底部

问题描述

当用户触摸按钮时，我需要从一个页面重定向以对另一页面的底部做出反应。


const goCart = () => {
   if(window.location.pathname !== '/products'){
     window.location.assign(ProductsPageLink());
     window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
   }
   else{
     window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
   }  
}


<div onClick={goCart} className={classes.shoppingCart} style={{display: isOpen ? 'none' : '',}}>
    ...
</div>

希望在第二页上重定向的地方有一个标识符

<div id="Cart-redirect-marker"></div>

我找不到先执行 window.location 操作然后再执行 window.scrollTo 的方法。使用我目前拥有的代码，情况正好相反，它在第一页上滚动，然后重定向到第二页的顶部。

除了这个实现相同目标的想法之外，仍然可以。

标签： reactjsreact-routerwindow.location

解决方案

您可以使用锚点来解决您的问题。您只需给要滚动到 id 的元素。例如：

<div id="bottom" />

现在您可以在您的 url 中引用它：https ://example.com/products#bottom 如果您在单击按钮时将 window.location 更改为该 url，该窗口将显示您的 html 元素的一部分。

推荐阅读