退会済みユーザー
2016/12/08 03:26 投稿
| JavaScriptで「topへ戻るボタン」のアニメーションを実装したい |
| Reactとmobxを使用しています(勉強中) |
| 参考：[スクロールするとページトップへ戻るボタンがフェードして表示](http://www.webopixel.net/lab/sample/12/0308scrollshow/pagetop-fade.html) |
| 上のサイトのような「ページの一番上に移動するボタン」を**jQueryを使わずに**jsで実装したいです。 |
| #やりたいこと |
| **jQueryを使わずに** |
| ・ページの一定の高さ分下へスクロールした時に「topへ戻る」ボタンを表示 |
| ・ボタンを押すとページの一番上に移動 |
| ・**一番上へ移動するときに「画面がパッと切り替わって上に移動する」のではなく |
| 「上へスクロールするアニメーションで移動」させたい(リンク先のサイト参照)** |
| #やったこと |
| 【全体の流れ】 |
| 下へスクロールして画面をクリック(main.js) |
| ↓ |
| クリックがトリガーとなりextendObservableにtrue/falseを保存(main.js) |
| ↓ |
| 保存されたtrue/falseを受け取りクラス名のon/offを切り替え(scroll.js) |
| ↓ |
| クラス名のon/offで、offの時にdisplay:noneを設定 |
| ``` |
| //main.js |
| // ↓ topページ |
| <div className='unique-container-top' id='#top-scroll' onClick={this.ScrollBool}> |
| hello world! |
| </div> |
| // ↓ スクロール量＞500のときrextendObservableのTopButtonDisplayにtrue(またはfalse)を保存 |
| ScrollBool () { |
| const DomId = document.getElementById('#top-scroll') |
| const ScrollY = window.pageYOffset |
| if (ScrollY > 500) { |
| scroll.TopButtonDisplay = true; // 500px分下にスクロールした → ボタン表示 |
| } else { |
| scroll.TopButtonDisplay = false; // スクロールしてない → ボタン非表示(display : none) |
| } |
| } |
| ``` |
| ``` |
| //scroll.js |
| // ↓ 「topに戻る」ボタン ・ クラス名のon/offの切り替え |
| <div className={'unique-container-scroll' + (scroll.TopButtonDisplay ? ' on' : ' off')} onClick={this.ScrollTop}> |
| <a className='item-button'>TOP</a> |
| </div> |
| // ↓ ページの一番上に移動 |
| ScrollTop(){ |
| window.scrollTo(0,0); |
| } |
| ``` |
| ``` |
| //extendObservable.js |
| // ↓ scroll.jsのtrue/falseを保存 |
| const scroll = new class { |
| constructor () { |
| extendObservable(this, { |
| TopButtonDisplay: '', // ここにmain.jsからのtrue/falseが入る |
| }); |
| } |
| } |
| ``` |
| scroll.jsの`(scroll.TopButtonDisplay ? ' on' : ' off')`でクラス名のon/offを切り替え |
| cssでoffの場合にdiplay : noneにしています。 |
| main.jsで`onClick={this.ScrollBool}`としているのは、 |
| 本当は「スクロールされたことを感知してextendObservableにtrue/falseを保存」したいのですが、 |
| jsで「スクロールを感知」する方法が分からないので、クリックで代用している状態です。 |
| #質問 |
| jQueryを使わずに |
| ①jsで「スクロールされたことを感知して関数を実行」するにはどうすれば良いですか？ |
| ②ページの一番上に移動するとき、`window.scrollTo(0,0);`を使うと画面がパッと切り替わって移動するのを |
| 「上へスクロールするアニメーションで移動」させるにはどうすれば良いですか？ |
| 特に②を解決したいです。CSS3を使うのはOKです。 |
| jQueryを使わないという縛りは単に「jsで実装したい」という動機だけです。 |
| jsは勉強中なので、できれば易しく教えてください。 |
| 文章やコードにわかりにくい部分があれば修正します。 |
| 回答よろしくお願いします。 |
