前提・実現したいこと
スムーススクロールでページ内を移動するjQueryを使用していますが、
btn1のクラスをもつ<a>をクリックした時は、150px分位置をずらしたいです。
下記のように組んでみたのですが、ずれずに移動してしまいます。
よい方法があれば教えていただけると助かります。
該当のソースコード
html
1<ul> 2<li><a href="#jump1" class="btn1">ボタン1</a></li> 3<li><a href="#jump2">ボタン1</a></li> 4</ul>
Javascript
1$(function(){ 2 $('a[href^="#"]').click(function(e) { 3 var speed = 500; 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 if($(e.target).hasClass("btn1")) { 7 var position = target.offset().top - 150; 8 } else { 9 var position = target.offset().top; 10 } 11 $('body,html').animate({scrollTop:position}, speed, 'swing'); 12 return false; 13 }); 14});
.btn1押下時に想定の箇所(-150と書いているところ)に入っていることは確認できていますか?
スムーズに移動しますが、150px分ずれていないので、入っていないということですよね
いえ、ちゃんとした確認をしましょう。 if($(e.target).hasClass("btn1")) { の直下にconsole.log("1"); そのifの} else {の直下に console.log("2"); と入れて動作確認をし、ブラウザの開発ツールのコンソールにどのときにどう出力されるか確認してみてください。
念のため利用しているjQueryのバージョンも質問に追記しておいてください。
失礼しました。確認してみます。バージョンは2.1.4です。
回答4件
あなたの回答
tips
プレビュー