質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

386閲覧

ページ内上部へ戻るスムーススクロールが効かなくなる

Gr.

総合スコア89

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/18 03:15

以下のコードでページ上部へのスクロールを実装しました。

views/layouts/application.html.erb

<body> <%= yield %> <footer> : ※中略 <div id="smooth-scroll">TOPへ</div> :

assets/javascripts/application.js

$(function(){ $("#smooth-scroll").click(function() { $("html,body").animate({scrollTop:0}, "300"); }); });

症状

上記コードで特に問題なく機能しているように思えたのですが、実際にはスクロールが効くシーンが限られており、状況によっては機能しなくなることに気づきました。

具体的に言うと、例えばこんな状況で機能したり機能しなかったりします。

1、サーバーを立ち上げページAにアクセス → スクロールできる
2、ページAからページBへ移動 → スクロールできない
3、ページBでページリロード → スクロールできる
4、ページBからページAへブラウザバック → スクロールできない
5、ページAでページリロード → スクロールできる
6、ページAでスクロールできる状況でページA内の表で並べ替えを行う → スクロールできなくなる

どなたか原因と解決策をお教えください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

turbolink周りで似たような問題に遭遇しました。
その時は単にturbolinkを切って対応しました。

投稿2018/09/18 04:57

perpouh

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Gr.

2018/09/19 08:52

perpouhさん 回答ありがとうございます! ご指摘の通りturbolinksを切ってみたところ、上手く挙動するようになりました。 まさかそんなところの問題だったなんて、自力では当分解決できなかったと思います。 とても助かりました!ありがとうございました!
perpouh

2018/09/19 08:58

お力になれたなら幸いです。 これDOM読み込み周りの問題なんですかね?試してないのでアレですけど $(document).on("click", "#smooth-scroll", function(){ $("html,body").animate({scrollTop:0}, "300"); });とか書いたら動いたりするんでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問