TOPに戻るアンカーについてです。スクロールしたら表示され、クリックするとスーッと戻したいのですが、どうしてもできません。申し訳ありません、お力添えいただきたくよろしくお願いします。 ```HTML ``` ```CSS #pageTop { display: table; position: fixed; bottom: 20px; right: 20px; } #pageTop i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #pageTop a { display: block; z-index: 999; padding: 8px 0 0 8px; border-radius: 30px; width: 35px; height: 35px; background-color: #000; color: #fff; font-weight: bold; text-decoration: none; text-align: center; } #pageTop a:hover { opacity: 0.7; } ``` ```JavaScript $(function(){ var topBtn=$('#pageTop'); topBtn.hide(); $(window).scroll(function(){ if($(this).scrollTop()>150){ topBtn.fadeIn(); }else{ topBtn.fadeOut(); } }); topBtn.click(function(){ $('body,html').animate({ scrollTop: 0},'slow'); return false; }); }); ```

TOPに戻るアンカーが心地よい動きをしないです。

TOPに戻るアンカーについてです。
スクロールしたら表示され、クリックするとスーッと戻したいのですが、どうしてもできません。申し訳ありません、お力添えいただきたくよろしくお願いします。

HTML
1<head>
2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
3    <script src="pagetop.js"></script>
4</head>
5<body>
6<p id="pageTop"><a href="#header"><i class="fa fa-chevron-up"></i></a></p>
7</body>
8</html>

CSS
1#pageTop {
2    display: table;
3    position: fixed;
4    bottom: 20px;
5    right: 20px;
6}
7
8 
9
10#pageTop i {
11  position: absolute;
12  top: 50%;
13  left: 50%;
14  transform: translate(-50%, -50%);
15}
16
17 
18
19#pageTop a {
20  display: block;
21  z-index: 999;
22  padding: 8px 0 0 8px;
23  border-radius: 30px;
24  width: 35px;
25  height: 35px;
26  background-color: #000;
27  color: #fff;
28  font-weight: bold;
29  text-decoration: none;
30  text-align: center;
31}
32
33 
34
35#pageTop a:hover {
36  opacity: 0.7;
37}

JavaScript
1
2
3$(function(){
4var topBtn=$('#pageTop');
5topBtn.hide();
6
7 
8$(window).scroll(function(){
9  if($(this).scrollTop()>150){
10
11    topBtn.fadeIn();
12
13  }else{
14
15    topBtn.fadeOut();
16
17  } 
18});
19
20topBtn.click(function(){
21  $('body,html').animate({
22  scrollTop: 0},'slow');
23  return false;
24
25});
26
27
28});

m.ts10806

2018/06/27 04:36 編集

そもそも今提示されたコードはどのように思っているのでしょうか。また、「心地よい」「スーッと」だけでは個人の感覚が大きすぎます。何か「これ」と明確な参考先はないでしょうか？

35suehiromaru

2018/06/27 04:40

ご閲覧くださり、ありがとうございます。参考にした先はこちらになります。http://serinaishii.hatenablog.com/entry/2015/11/06/%E8%B6%85%E7%B0%A1%E5%8D%98%26%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7OK%EF%BC%81%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%88%E3%83%83%E3%83%97%E3%81%B8%E6%88%BB%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE

m.ts10806

2018/06/27 04:44

いえ、そうではなくて、「これが自分の期待する動きというもの」の参考です。

m.ts10806

2018/06/27 04:44

今のところ「スーッと」はなっているように思いますし、何がダメなのか質問内容だけでは他人には伝わっていません。

m.ts10806

2018/06/27 04:45

”easing”指定をその参考URLからは変更されたようですが、slow以外も試してみたのでしょうか。

35suehiromaru

2018/06/27 04:57 編集

移動速度については数値を変更することで、どのようになるか試したいと思っています。slow以外も【500】という数値を入力したりしましたが、javascriptが上手く機能していないようでクリックすると、すぐにtopに移動してしまいます。それと、最初に表示された画面から下方にスクロールした時に、アンカーが現れるようになっているはずですが、すぐに表示されてしまいます。PCを再起動したりしたのですが分らず、調べているところです。

行動規範の内容に同意します

回答1件

ベストアンサー

そもそも$(window).scroll()も.animate()も効いていないようですね。

おそらく読み込み順序の問題です。
jQuery本体の読み込みと実際組まれたJavaScriptコードの読み込みを

</body>の直前に置いてください。

例

html
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2<script src="pagetop.js"></script>
3<script>～～～～</script>
4</body>
5</html>

投稿2018/06/27 05:01

編集2018/06/27 05:04

m.ts10806

総合スコア80892

m.ts10806

2018/06/27 05:03

あと、提示コードだけでは $(this).scrollTop() > 150 の条件を満たさないので改行沢山入れるか画像入れたりしてスクロールが出るくらいのheightを作ってください。

35suehiromaru

2018/06/27 05:07

ありがとうございます。早速試します。

35suehiromaru

2018/06/27 05:13

できました！補足も下さり、ありがとうございます。読み込み順序の問題があるのですね。順序について、今後気を付けます。

m.ts10806

2018/06/27 05:15

解決したようで何よりです。そうですね。何かのイベントを待っての処理だと結構その順序が大事だったりします。特に今回は $(function(){の中に $(window).scroll(function()　と .click(function()　があるのでタイミングによってはJavaScript側がうまく拾えない可能性があります。

35suehiromaru

2018/06/27 05:20

解決後のコメント嬉しいです。組み方で変わる考えは全くなかったので、勉強になります。ありがとうございます！

行動規範の内容に同意します