CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能

テクノロジーカテゴリーの変更を依頼記事元:

hail2u.net

70 usersがブックマークコメント

コメント

3

記事へのコメント3件

注目コメント
新着コメント

pmint 実用的にやるならhtml要素をscroll-behavior:smoothにするだけ。window.scrollTo(0, 0)もこれでスムーズになる。

*Wiki
CSS

2015/10/14 リンク

oppara CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能 - Weblog - http://t.co/PMuo53MRxd B!

2015/05/18 リンク

piayo おもしろい

2015/05/12 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能

前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導... 前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理

ブックマークしたユーザー

cyber_snufkin2019/03/27
pmint2015/10/14
eedamame2015/06/24
moonblogger2015/05/19
oppara2015/05/18
blend272015/05/14
tksnesne2015/05/14
ms09242015/05/14
maquit2015/05/13
ajinorichan2015/05/13
yasuosakai2015/05/13
piayo2015/05/12
cornelius19762015/05/12
tyru2015/05/12
teppeis2015/05/12
kkeisuke2015/05/12
shirotorabyakko2015/05/11
labunix2015/05/11

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

設定を変更しましたx