Question

这是一个瓶颈：

单击图块时，它会扩展（带有文本），我需要放置页面，以便单击的图块（因此已激活）位于页面顶部。和其他瓷砖一样基本上，我需要将clicked元素重新放置在顶部：

这是JS中单个元素的一部分：

expandItem(idx) {
    // Need to make this logic here
    // scroll to the beginning of the section if tablet screen
    const tabletWidth = window.innerWidth > 767 && window.innerWidth < 1170;
    if (tabletWidth) {
      scrollTo(this.gridContainer);
    }
    this.setState({
      activeItem: idx
    })
  }

const GridItem = ({ content, currentState, expandItem, collapseItem }) => {
  return (
    <div className={`fancy_grid_single_item ${currentState}`} onClick={expandItem}>
      <div className="small_tile_content">
        <LazyImg src={content.icon} alt={content.name} />
        <h3>
          {content.name}
        </h3>
        <span className='grid_item_view_more_btn'>
          <LazyImg src={AngleDoubleDown} alt="view more" />
        </span>
      </div>
      <div className="active_tile_content">
        <h3>{content.name}</h3>
        <p>{content.description}</p>
        <button className='grid_item_close' onClick={collapseItem}>
          <LazyImg src={AngleDoubleDown} alt="close" />
        </button>
      </div>
    </div >
  )
}

图像在这里 Clicking on ISV & Technology make it at the top of page

Answer 1

您是否尝试过使用锚标签包装图像并使用href将元素显示在视图中？

例如，如果您的图像当前定义为-

<jdk path>/bin/jinfo 10542 | grep foo.jar

使它像-

<img src="someIcon.png" id="someImg"/>

我们用锚标签包裹了图像标签。点击图片将被锚标记接收，这将使id =“ someImg”定义的元素进入视图并显示在页面顶部（假设其下方有足够的内容）

在您的情况下，包装元素-

<a href="#someImg"><img src="someIcon.png" id="someImg"/></a>

带有锚标签的

连同提供ID一起就足够了

Answer 2

使用scrollIntoView，onClick将div id作为参数传递给goToStep函数。

  goToStep = (stepId) =>{
    this.setState({
      atTop:stepId
    },()=>{
            var content = document.getElementById('transitToTop'+(stepId));
            content.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
          }
    );
  }

触发事件

<button className="btn btnStep" onClick={()=>this.goToStep(divid)}>scroll to div</button>

滚动文档，使单击的元素显示在页面顶部

2 个答案: