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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

jQuery

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

Q&A

解決済

2回答

1654閲覧

『Topへ戻る』がサイト内別ページに飛ぶと動かない

innjera

総合スコア132

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2016/12/12 12:49

編集2016/12/13 03:28

jQueryを用いて、Topへ戻るボタンを作成しています。

基本的な動作は意図した通りなのですが、別のページ(例えば、Topページからプロフィールページ)にサイト内リンクから飛ぶと、ボタンの表示は設計通りに挙動するのですが、Topに戻る部分(以下コードの$( '#move-page-top' ).clickに該当する部分)のみ何故か機能しません。

ところが、そのページでRefreshした後、ボタンをクリックすると、問題なくtopに戻ります。
何かしらの記載ミスがあるのだと思いますが、自己解決できず、ご指摘頂けますと幸甚です。

javascript

1var syncerTimeout = null ; 2 3$( function() 4{ 5 $( window ).scroll( function() 6 { 7 if( syncerTimeout == null ) 8 { 9 syncerTimeout = setTimeout( function(){ 10 var element = $( '#page-top' ) ; 11 var visible = element.is( ':visible' ) ; 12 var now = $( window ).scrollTop() ; 13 var under = $( 'body' ).height() - ( now + $(window).height() ) ; 14 15 if( now > 200 ) 16 { 17 if( !visible ) 18 { 19 element.fadeIn( 'fast' ) ; 20 } 21 } 22 else if( visible ) 23 { 24 element.fadeOut( 'fast' ) ; 25 } 26 syncerTimeout = null ; 27 } , 1000 ) ; 28 } 29 } ) ; 30 $( '#move-page-top' ).click( 31 function() 32 { 33 $( 'html,body' ).animate( {scrollTop:0} , 'slow' ) ; 34 } 35 ) ; 36} ) ;

html

1 <div id="page-top" class="page-top"> 2 <p> 3 <a id="move-page-top" class="move-page-top"> 4 <i class="fa fa-chevron-up fa" aria-hidden="true" style="color:white;margin-bottom:0.5rem"></i> 5 TOP 6 </a> 7 </p> 8 </div> 9

cssが悪さをしているとは思いませんが、念のため記載します。

css

1.page-top{ 2 z-index:2; 3 margin: 0 ; 4 padding: 0 ; 5 position: relative; 6 display: none; 7} 8.page-top p{ 9 margin: 0 ; 10 padding: 0 ; 11 position: fixed ; 12 right: 20px ; 13 bottom: 20px ; 14 color: white; 15} 16.move-page-top{ 17 display: block ; 18 border-radius: 5px; 19 background: rgba(0, 0, 0, 0.5); 20 width: 40px ; 21 height: 40px ; 22 line-height: 10px ; 23 text-decoration: none ; 24 text-align: center; 25 -webkit-transition:all 0.3s ; 26 -moz-transition:all 0.3s ; 27 transition:all 0.3s ; 28} 29.move-page-top:hover{ 30 opacity: 0.85 ; 31}

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

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

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

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

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

gin

2016/12/13 03:19

遷移後のHTMLは何か変化がありますか?idが違うものになっていたり
innjera

2016/12/13 03:20

コメント有難う御座います。確認方法が間違っていなければ、特にエラーは出ていなそうです。こちらが該当サイトになります。http://www.faceyoga-misaki.com/ これをデベロッパーツールで見てみましたが、エラーは見られませんでした。
innjera

2016/12/13 03:26

> ginさん 有難う御座います。htmlも確認しましたが、確認した限り、遷移後も特に変化は見られないです。
gin

2016/12/13 03:57

開発ツールで遷移直後とリロード後を見比べてみると<head>内が前者は乱れてますね~。しかもchromeで見たときとfirefoxで見たときでも違ってる…。リロード後はどちらも同じですが。
guest

回答2

0

ベストアンサー

ページを見に行ったらAjaxでページ遷移していたので、そりゃイベント壊れるんじゃ、と思い検索したところ、こんな記事が。Railsってデフォルトでこんなことするんですか……

turbolinksでページをロードすると、jQueryのreadyイベントが発火しません。$(function(){})に入ってる処理が実行されないということです。代わりに以下の4つのイベントが用意されています。

Rails 4のturbolinksについて最低でも知っておきたい事 | KRAY Inc

投稿2016/12/13 04:01

Lhankor_Mhy

総合スコア35815

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

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

guest

0

投稿2016/12/13 03:37

kei344

総合スコア69357

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

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

innjera

2016/12/13 03:45

有難う御座います! 大変恥ずかしながら、実力不足で、全くついていけない(何が問題なのかわからない)のですが、ヒント頂けますと有り難く存じます。。
kei344

2016/12/13 03:51

何処で設定しているかは知りませんが、外せばいいのでは?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問