@hulktoster

Как написать такой JS код на React?

Есть кнопка которая опускает страницу к определенным координатам:
<div class="container">
<div class="down">
    <div class="down-text">DOWN
    <button onclick="topFunction2Section()" class="myBtn2" title="Down">&#10095;</button>
    </div>
</div>
</div>


<style>
    .container{
        background: yellow;
        height: 3000px;
        width: 100%;
    }
</style>


<script>
function topFunction2Section() {
           document.body.scrollTop = 940;
           document.documentElement.scrollTop = 940;
}
    </script>
  • Вопрос задан
  • 399 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
const ScrollButton = props => {
  const onClick = () => window.scrollTo({
    top: props.scrollTo,
    behavior: 'smooth',
  });

  return (
    <div className="down" style={{ top: `${props.top}px` }}>
      Scroll to {props.scrollTo}
      <button onClick={onClick}>&#10095;</button>
    </div>
  );
};

const App = () => (
  <div className="container">
    <ScrollButton scrollTo={500} top={50} />
    <ScrollButton scrollTo={1000} top={100} />
    <ScrollButton scrollTo={2000} top={200} />
  </div>
);

.down {
  position: fixed;
}

https://jsfiddle.net/zm0x4ycj/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы