如何在材质 ui 中将视图移动到手风琴顶部

Question

我在我的 reactjs 项目中使用了材质 ui 手风琴。在这里，当手风琴打开时我面临一个问题，我想专注于手风琴详细内容的顶部。我尝试添加滚动到顶部，但这似乎不起作用。

这是我的代码

<Accordion
                  key={i + 1}
                  square
                  expanded={expandAccordion === `panel${i + 1}`}
                  onChange={handleChange(`panel${i + 1}`, item.id)}
                >
                  <AccordionSummary
                    classes={{
                      root: classes.accordionSummery,
                    }}
                    id="accSummery"
                    className={classes.expansionPanel}
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1d-content"
                    id="panel1d-header"
                  >
              
                    <Typography noWrap={true} className={classes.itemHarm}>
                      <Chip
                        label={item.harm}
                        color={item.harmColor}
                        style={{
                          backgroundColor: `${item.harm_color}`,
                          width: "100%",
                          minWidth: "100px",
                          color: "#ffffff",
                        }}
                      />
                  
               
                    <Typography style={{ flex: 1 }} />
                  
                    
              
                    </Typography>
                  </AccordionSummary>
                  <AccordionDetails>
                    <div style={{ width: "100%" }}>
                      {dispensingDetailLoading ? (
                        <div
                          style={{
                            display: "flex",
                            width: "100%",
                            justifyContent: "center",
                          }}
                        >
                          <CircularProgress color="primary" />
                        </div>
                      ) : (
                        <div ref={detailRef}>
                          <DetailComponent data={slide1} />
                          <DetailComponent data={slide2} />
                          <DetailComponent data={slide3} />
                          <DetailComponent data={slide4} />
                          <DetailComponent data={slide5} />
                          <DetailComponent data={slide6} />
                          <DetailComponent data={slide7} />
                        </div>
                      )}
                

这里有变化

const handleChange = (panel, id) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
    // passing props to parent component
    handleAccordionChange(id, newExpanded, panel);
    if (newExpanded === true) {
      getDispensingData(id);
      setSlides(0);
    }
    onFocusView();
  };

  
  const detailRef = useRef();

  

  const onFocusView = () => {
    const scrollHeight = window.pageYOffset - window.innerHeight;
    const h = window.scrollY - detailRef.current.clientHeight;
    // const h = window.scrollY - detailRef.current.offsetTop;
    console.log("detailRef", detailRef);
    window.scrollTo({
      top: scrollHeight ,
      left: 0,
      behavior: "smooth",
    });
  };