[SOLVED] react button scroll to particular div

react button scroll to particular div

I am developing a react website at the top I have navbar, with logo in the left, nav links on the center, and "need home tutor" button in the right whenever users click this button I want to scroll to contact us <div> </div>.

here is what I tried: - i.e my 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 handler :-

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

Solution