如何在按钮卡底部放置向下滚动箭头

Question

我的卡片组件渲染一个按钮，看起来像这样

  const SearchCard = () => (
    <div>
      <a href="#bottomSection" className="scroll-button">
        <img src="images/arrow_down.svg" alt="scroll to bottom" />
      </a>
      <button class="invisible-button" onClick={onSearchCardClick}>
        <img id="search-image" alt={imgAlt} style={cardStyles} src={card.src} />
      </button>
      <div id="bottomSection"></div>
    </div>
  );

#

我在左上角的 x 下方有一个向下箭头，它滚动到底部，首先我希望它位于底部，如下图所示，并且仅在 card.src 比视图长时出现

Answer 1

您可以通过将其固定在 CSS 中，然后将其置于右下角，将其定位到底部，如下所示：

.scroll-button {
  position: fixed;
  bottom: 0;
  right: 0;
}