スマホでページ内リンクがうまく動きません。

lang
1html(slimで記述)
2
3span#click
4     | クリックしてください
5= image_tag(“images/click-button.png", :size => “150x100", :alt => "ボタン")
6
7
8
9#goal__anchor
10#goal
11     | ここに飛ぶ。
12
13

lang
1jQuery
2
3$(“#click").click(function(){
4     var i = $(“#click").index(this)
5     var p = $(“#goal").eq(i).offset().top;
6     $('html,body').animate({ scrollTop: p }, 800);
7     return false;
8});

このようなソースです。
リンクをクリックしても反応せず、console.logでpを取得してみるとページトップではなく、画面のトップの値を取得していました。
pc版では上記のソースで普通に動きました。

どこがいけないのかがわかりません。回答のほど宜しくお願いします。

sounisi5011

2015/05/27 02:20

スマホの機種、OSの種類とバージョン、ブラウザの種類とバージョンについての情報を記載してください。スマホは機種依存のバグが多く、「スマホ」だけでは解決できません。

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

回答1件

問題のありそうな部分をまとめました。(+αもあり)

コード内のダブルクォーテーションがおかしいです。
$(“#click")などを$("#click")に変えてみて下さい。(左ダブルクォーテーション(全角)「“」をダブルクォーテーション(半角)「"」に直す)

また、変数 i をセミコロンで閉じ忘れています。
var i = $(“#click").index(this)→var i = $( "#click" ).index( this );

lang
1// scrollTopがhtmlとbodyどちらで機能するか判別する関数
2var isHtmlScroll = ( function() {
3    var html = $( "html" ), top = html.scrollTop();
4    var el = $( "<div/>" ).height( 10000 ).prependTo( "body" );
5    html.scrollTop( 10000 );
6    var rs = !!html.scrollTop();
7    html.scrollTop( top );
8    el.remove();
9    return rs;
10})();
11
12$( "#click" ).click( function() {
13    var i = $( "#click" ).index( this );
14    var p = $( "#goal" ).eq( i ).offset().top;
15    $( isHtmlScroll ? "html" : "body" ).not( ":animated" ).animate( { scrollTop: p }, 800 );
16    return false;
17});