反应按钮滚动到特定 div

Question

我正在开发一个位于顶部的 React 网站我有 navbar，左边有徽标，中间有导航链接，右边有“需要家庭教师”button单击此按钮我想滚动以联系我们 <div> </div>。

这是我尝试过的：- 即我的 navbar.js

  <div className="collapse navbar-collapse" id="navbarCollapse">
            <ul className="navbar-nav navbar-right" id="mySidenav">
              <li className="nav-item active">
                <a href="#home" className="nav-link">
                  Home
                </a>
              </li>
              <li className="nav-item">
                <a href="#services" className="nav-link">
                  Services
                </a>
              </li>
              <li className="nav-item">
                <a href="#features" className="nav-link">
                  About Us
                </a>
              </li>
              {/* <li className="nav-item">
                <a href="#pricing" className="nav-link">
                  Pricing
                </a>
              </li>
              <li className="nav-item">
                <a href="#team" className="nav-link">
                  Team
                </a>
              </li>
              <li className="nav-item">
                <a href="#blog" className="nav-link">
                  Blog
                </a>
              </li> */}
              <li className="nav-item">
                <a href="#contact" className="nav-link">
                  Contact us
                </a>
              </li>
            </ul>
            <div className="nav-button ml-auto">
              <ul className="nav navbar-nav navbar-right">
                <li>
                  <button
                    type="button"
                    className="btn btn-custom navbar-btn btn-rounded waves-effect waves-light"
                    onClick={scrollToBottom}
                  >
                    Need home tutor ?
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    );
  }
}

onScroll 处理程序：-

const scrollToBottom = () => {
  window.scroll({
    bottom: document.body.scrollHeight, // 
    left: 0,
    behavior: "smooth",
  });
};

Answer 1

https://robinvdvleuten.nl/blog/scroll-a-react-component-into-view/

您可以使用 scrollIntoView() 和 useRef() 滚动特定元素a。

Answer 2

你可以使用像

这样的东西

node.scrollIntoView({block: "start", behavior: "smooth"})

查看更多：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

反应按钮滚动到特定 div

react button scroll to particular div

scroll

reactjs