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

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

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

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails

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

JavaScript

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

jQuery

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

Q&A

解決済

2回答

1552閲覧

Topへ戻るボタン

innjera

総合スコア132

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/12/07 03:41

編集2016/12/07 05:14

Ruby on Rails 5.0.0.1にて開発しています。

とても初歩的で低レベルのことと理解しながら、自分で調べていてもうまくいかず、アドバイス頂けますと幸甚です。

よくある「Top」を押すとTopに戻るボタンを作成しています。

イメージ説明

以下の通りファイルを構成し、CoffeeScriptを書いていますが、クリックしても一切反応せず、初歩的なことなのだと思いますが、何がいけないのかご指摘頂けますと助かります。

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-arrow-up fa-2x" aria-hidden="true" style="color:white"></i> 5 TOP 6 </a> 7 </p> 8 </div>

css

1.page-top{ 2 margin: 0 ; 3 padding: 0 ; 4} 5.page-top p{ 6 margin: 0 ; 7 padding: 0 ; 8 position: fixed ; 9 right: 20px ; 10 bottom: 20px ; 11 color: white; 12} 13.move-page-top{ 14 display: block ; 15 background: $gray ; 16 width: 50px ; 17 height: 50px ; 18 line-height: 10px ; 19 text-decoration: none ; 20 text-align: center; 21 -webkit-transition:all 0.3s ; 22 -moz-transition:all 0.3s ; 23 transition:all 0.3s ; 24} 25.move-page-top:hover{ 26 opacity: 0.85 ; 27}

CoffeeScript

1#ファイル名: top.js.coffee 2 3$('#move-page-top').click -> 4 $('html,body').animate scrollTop:0,'slow'

念のため、その他読込のためのコードは以下の通り

html

1<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

application.js

//= require jquery //= require jquery_ujs //= require turbolinks //= require tether //= require bootstrap-sprockets //= require_tree .

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

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

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

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

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

guest

回答2

0

自己解決

$ ->を1行目に記載したら動きました。

CoffeeScript

1$ -> 2 $('#move-page-top').click -> 3 $('html,body').animate scrollTop:0,'slow' 4 $('#move-page-top').click -> 5 $('html,body').animate scrollTop:0,'slow' 6

投稿2016/12/07 13:48

編集2016/12/07 14:02
innjera

総合スコア132

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

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

0

Ruby on Rails 5.0.0.1もCoffeeScriptもわかりませんが、
単純にaタグの書き方が違うんじゃないですかね?

html

1<a id="move-page-top" class="move-page-top">

例えば

html

1<a href="#move-page-top" class="move-page-top"> 2

とか?

違っていたらすいません。

投稿2016/12/07 06:59

8-0_nyan5

総合スコア2352

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

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

innjera

2016/12/07 13:49

コメント有難う御座いました。自己解決に投稿の通り、単純なミスでした、、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問