CSS Transitionを使ã£ãŸã‚¹ãƒ ーズã«ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦ãƒˆãƒƒãƒ—ã«æˆ»ã‚‹æ©Ÿèƒ½å‰ã«ä½œã£ãŸã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ãŸæ™‚ã«ä½ç½®å›ºå®šã®ãƒã‚´ã‚’トップã«æˆ»ã‚‹æ©Ÿèƒ½ã«ã™ã‚Šæ›¿ãˆã‚‹ã‚‚ã®ã‚’å°‘ã—手直ã—ã—ã¦å†å°Žå…¥ã—ãŸã€‚今回ã¯ã‚¹ãƒ ーズã«ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã•ã›ã‚ˆã†ã‹ã¨è‰²ã€…考ãˆã¦ã„ãŸãŒã€ã‚„ã¯ã‚ŠJavaScriptã§scrollTo()を制御ã™ã‚‹ã®ã¯ã‚³ã‚¹ãƒˆãŒé«˜ã„。CSSãªã‚‰ã©ã†ã ã¨è©¦è¡ŒéŒ¯èª¤ã—ãŸã¨ã“ã‚ã€ã©ã†ã‚„らbodyè¦ç´ ã¸ã®è² ã®ãƒžãƒ¼ã‚¸ãƒ³ã‚’CSS Transitionã§æ»‘らã‹ã«å¤‰åŒ–ã•ã›ã‚Œã°è‰¯ã„よã†ã 。 Demo: Scroll Smoothly with CSS Transition デモã®ãƒšãƒ¼ã‚¸ã«ã¯ãƒ€ãƒŸãƒ¼ãƒ†ã‚ストã®å„セクションã®æœ€å¾Œã«ãã‚Œãžã‚Œâ‡‘ Back to Topã¨ã„ã†ãƒªãƒ³ã‚¯ãŒã‚る。ãれをクリックã™ã‚‹ã¨1秒ã‹ã‘ã¦ã‚¹ãƒ ーズã«ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ãªãŒã‚‰ãƒˆãƒƒãƒ—ã«æˆ»ã‚‹ã€‚トリガーã¨ã‚¹ã‚¯ãƒãƒ¼ãƒ«è‡ªä½“ã¯JavaScriptã§è¡Œã£ã¦ã„ã‚‹ãŒã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³è‡ªä½“ã¯CSS Transitionã§è¡Œã£ã¦ã„る。具体的ã«ã¯ä»¥ä¸‹ã®ã‚ˆã†ãªå‡¦ç†
[CSS]フッタã®è¡¨ç¤ºã‚’コンテンツé‡ãŒå°‘ãªã„時ã¯æœ€ä¸‹éƒ¨ã«å›ºå®šã€å¤šã„時ã¯æˆã‚Šè¡Œãã«ã™ã‚‹ã‚·ãƒ³ãƒ—ルãªãƒ†ã‚¯ãƒ‹ãƒƒã‚¯![[CSS]フッタã®è¡¨ç¤ºã‚’コンテンツé‡ãŒå°‘ãªã„時ã¯æœ€ä¸‹éƒ¨ã«å›ºå®šã€å¤šã„時ã¯æˆã‚Šè¡Œãã«ã™ã‚‹ã‚·ãƒ³ãƒ—ルãªãƒ†ã‚¯ãƒ‹ãƒƒã‚¯](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e55a7967f77bbcc88ed8e9e24c73a34c021f77e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051101.png)
{{#tags}}- {{label}}
{{/tags}}