๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/javascript, jQuery

โœˆ jquery๋กœ ํŽ˜์ด์ง€ ์ƒ๋‹จ์œผ๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด๋™ํ•˜๋Š” ํƒ‘ ์Šคํฌ๋กค ๋ฒ„ํŠผ ๋งŒ๋“ค๊ธฐ

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2020. 2. 21.

๋ชฉ์ฐจ

    ๋ณดํ†ต ํƒ‘์Šคํฌ๋กค์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๋ฒ„ํŠผ์ธ๋ฐ์š”.

    ํ”ํ•œ ๋ฐฉ์‹์ด์ง€๋งŒ, ๊ฐ€๋” ๋–  ์˜ค๋ฅด์ง€ ์•Š์•„์„œ ๊ฒ€์ƒ‰ํ•˜์‹œ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์˜ฌ๋ ค๋‘ก๋‹ˆ๋‹ค.

    ๋ญ~ ์ €๋„ ๊ฐ€๋”์€ ๊นŒ๋จน์–ด์„œ ๋‹ค์‹œ ์ƒ๊ฐํ•ด๋‚ด๋Š” ์ผ ์—†์ด ๋– ๋‹ค ์“ฐ๋ ค๊ณต....

    /* top ์Šคํฌ๋กค */
    
    var speed = 500;
    $("a.top").css("cursor", "pointer").click(function(){
    $('body, html').animate(, speed);
    });

    speed ๋ณ€์ˆ˜๋Š” ์Šคํฌ๋กค์ด ์• ๋‹ˆ๋ฉ”์ดํŠธ ๋˜์–ด์„œ ์ด๋™ํ•˜๋Š” ์†๋„๋ฅผ ์ง€์ •ํ•ด์คฌ์Šต๋‹ˆ๋‹ค.

    ๊ท€์ฐฎ์œผ๋ฉด ๊ทธ๋ƒฅ ๋ณ€์ˆ˜ ์“ฐ์ง€ ๋ง๊ณ  ์ˆซ์ž๋กœ ๋ฐ”๋กœ ์จ๋„ ๋ฉ๋‹ˆ๋‹ค.

    . css("cursor, "pointer")๋Š” ์ƒ๋žตํ•ด๋„ ๋ฌด๋ฐฉํ•˜๋ฉฐ, css์ž์ฒด์— a.top { cursor:pointer}๋กœ ์ž‘์„ฑํ•ด๋‘์–ด๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค.

    ์‹ค์งˆ์ ์ธ ํ•ต์‹ฌ์€ $('a.top')์„ ์ฐพ์•„์„œ. click(function(){} ํ•จ์ˆ˜๋ฅผ ์ˆ˜ํ–‰ํ•˜๋ผ๋Š” ๊ฒƒ์ด๊ณ , ๊ทธ ์ˆ˜ํ–‰ํ•  ๋‚ด์šฉ์€ $('body, html')์„ ์ฐพ์•„์„œ .animate(. speed); 0์œ„ ์น˜๊นŒ์ง€ body์˜์—ญ์„ ์Šคํฌ๋กค ํƒ‘ ํ•˜๋ผ๋Š” ๋œป์ด๊ฒ ์ฃ ?

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€