๐Ÿ”JavaScript[Easy Way]๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์ชฝ์œผ๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์Šคํฌ๋กคํ•ฉ๋‹ˆ๋‹ค.

1672 ๋‹จ์–ด webdevprogrammingjavascriptbeginners

ํ›„๊ด‘๐Ÿ‘‹


์ด ๊ฐ•์ขŒ์—์„œ ์ˆœ์ˆ˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€๋ฅผ ๋งจ ์œ„์— ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

Scroll to top buttons allow users to quickly return to the top of a webpage with a single click. This can be very useful when the page has a lot of content.


  • ๋จผ์ € ํ•„์š”ํ•œ ๋ชจ๋“  JavaScript๋ฅผ ํฌํ•จํ•˜๋Š” scrollToTop() ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  • function scrollToTop(){
    // all JavaScript will go here
    };
    
  • ๋‹ค์Œ ๋‹จ๊ณ„๋Š” scrollToTop() ํ•จ์ˆ˜์—์„œ ์ฐฝ์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.scrollTo() ๋ฉ”์„œ๋“œ์—๋Š” ๋‘ ๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜ ์ขŒํ‘œ์™€ ๋™์ž‘์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
    }
    
  • ๋‹ค์Œ ๊ฐ€์žฅ ์ข‹์€ ๋ถ€๋ถ„์€ ๋งค๋„๋Ÿฝ๊ฒŒ ๊ตด๋Ÿฌ๊ฐ€๋Š” ๊ฒƒ์œผ๋กœ behavior:'smooth'๋กœ ์‰ฝ๊ฒŒ ์™„์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ํ•œ ๋งˆ๋””๋กœ ํ•˜๋ฉด, ์ด๊ฒƒ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€๋ฅผ ๋งจ ์œ„๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ๊ตด๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.ํ•„์š”์— ๋”ฐ๋ผ ์ด ์ฝ”๋“œ๋ฅผ ๋” ์‚ฌ์šฉ์ž ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์„ ์–ธ ์œ ์ง€ ๋ฐ ์ธ์ฝ”๋”ฉ๐Ÿ˜Ž

    ์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ