scrollto()

목차

 

 

자동 스크롤

오늘은 함수로 자동 스크롤 이동을 포스팅하려 한다.

사소하긴 한데 페이지에 한 번씩은 쓰이는 것 같다.

 

기본적인 함수 모양은 이렇다.

element.scrollTo(x-coord, y-coord)

첫 번째 인자는 x축(가로)

두 번째 인자는 y축(세로)이다.

window.scrollTo(8000, 0);

x축으로 8000px 이동

window.scrollTo(0, 8000);

y축으로 8000px 이동

코드

import React from "react";
import styled, { createGlobalStyle } from "styled-components";

function App() {
  function ToBottom(e) {
    window.scrollTo(0, 8000);
  }

  function ToRight(e) {
    window.scrollTo(8000, 0);
  }

  function OptionToBottom(e) {
    window.scrollTo({top:2000, behavior:'smooth'});
  }

  function OptionToRight(e) {
    window.scrollTo({left:8000, behavior:'smooth'});
  }


  return (
    <>
      <GlobalStyle/>
      <D_styled>
        <button onClick={ToBottom}>to bottom</button>
        <button onClick={ToRight}>to right</button><br/>
        <button onClick={OptionToBottom}>to bottom Option</button>
        <button onClick={OptionToRight}>to right Option</button>
      </D_styled>
    </>
  );
}

해석

toBottom(Right) 함수는 위에 상술한 대로이니 상관없는데,

OptionToBottom(Right)를 보면 좀 다르게 상술되어있다.

이거는 option을 추가 설정한 함수로써,

window.scrollTo({left:8000, top:8000, behavior:'smooth'});

left랑 top은 기본형이랑 같으니 알 테지만,

behavior: 'smooth'는 새로운 개념이다.

 

해당 옵션을 설정해주면 해당 위치로 바로 이동하던 스크롤이,

부드럽게 이동하게 된다.