ページ内リンク

355 views
  1. コメントする
  2. 記事検索
  3. 更新
  4. 凍結

0
 Chrome 2018/08/22 11:52
ページ内リンクのスムーズスクロールについて、head内に

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<!-- スムーズスクロール -->
<script>
$(function(){
$('a[href^="#"]').click(function() {
var speed = 400; // スクロールスピード(ミリ秒)
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
<!-- スムーズスクロール -->

を記述していますが全く効きません。

自分なりに調べてみましたが、href^=#とhref^="#"の記事しか見つかりませんでした。
jQueryのバージョンを変えてみましたが、それでもダメでした。

お手上げ状態なのでどなたか知恵を貸して頂けると助かります。

残り999件書き込み可

1
しち Firefox 2018/08/22 22:10
>>0
jQuery埋め込みURLが「http:〜」になっているせいですね。
参考→https://webmist.info/https-javascript/(https通信下でJavascriptが動かない場合の対処法)

ページが「https:」で表示されているのに「http:」でjQueryを読み込めと書いてあるから、読み込めず、結果jQueryが機能しないということみたいです。
なので1行目を、


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


という風にプロトコル(=http:やhttps:)を省略するか、http:を「https:」に書き換えれば動きます。
(特に理由がなければ最新版のjQueryでいいと思うので、↑は最新のを引っ張ってきました)

ただこのプロトコル省略という手法は現在Googleさん的には非推奨と言っているので、どちらを使うかはお任せします…。
私個人は省略を使用しており、今のところ特に問題はないですとだけ。
1ページ中1ページ目

Back to Top