質問編集履歴

1 誤字

退会済みユーザー

退会済みユーザー

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は勉強中なので、できれば易しく教えてください。  
文章やコードにわかりにくい部分があれば修正します。
回答よろしくお願いします。
  • JavaScript

    20372 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS3

    2624 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る