Breaking News: Grepper is joining You.com. Read the official announcement!

react scroll down on click

YOU.com answered on August 6, 2022 Popularity 7/10 Helpfulness 1/10

answer react scroll down on click

related react scroll in up when click element

react scroll down on click

Comment

import React, { useRef } from 'react';

const ScrollDownButton = () => {
  const sectionRef = useRef(null);

  const handleScrollDown = () => {
    sectionRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <>
      <button onClick={handleScrollDown}>Scroll Down</button>
      {/* ... */}
      {/* Content */}
      {/* ... */}
      <section ref={sectionRef}>
        {/* ... */}
        {/* Scroll to this section on button click */}
        {/* ... */}
      </section>
    </>
  );
};

export default ScrollDownButton;

Popularity 7/10 Helpfulness 1/10 Language

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

react scroll in up when click element

Comment

import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current?.scrollIntoView({behavior: 'smooth'});
  };

  return (
    <div>
      <button onClick={handleClick}>Scroll to element</button>

      <div style={{height: '155rem'}} />

      <div ref={ref}>Some content here</div>

      <div style={{height: '155rem'}} />
    </div>
  );
}

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: bobbyhadz.com

Tags: click clic

Link to this answer
Share Copy Link

Contributed on Aug 06 2022

Danish Pk

0 Answers Avg Quality 2/10

react scroll down on click

Contents

More Related Answers

react scroll down on click

Closely Related Answers

react scroll in up when click element

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.