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

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

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

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

Q&A

解決済

4回答

509閲覧

スムーススクロールで特定のクラスをもつリンクの時は、位置をずらしたい

Yukos

総合スコア8

jQuery

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

0グッド

0クリップ

投稿2018/04/04 04:37

前提・実現したいこと

スムーススクロールでページ内を移動する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});

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

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

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

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

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

m.ts10806

2018/04/04 04:39

.btn1押下時に想定の箇所(-150と書いているところ)に入っていることは確認できていますか?
Yukos

2018/04/04 04:49

スムーズに移動しますが、150px分ずれていないので、入っていないということですよね
m.ts10806

2018/04/04 04:53

いえ、ちゃんとした確認をしましょう。 if($(e.target).hasClass("btn1")) { の直下にconsole.log("1"); そのifの} else {の直下に console.log("2"); と入れて動作確認をし、ブラウザの開発ツールのコンソールにどのときにどう出力されるか確認してみてください。
m.ts10806

2018/04/04 04:54

念のため利用しているjQueryのバージョンも質問に追記しておいてください。
Yukos

2018/04/04 05:57

失礼しました。確認してみます。バージョンは2.1.4です。
guest

回答4

0

提示コードでは問題は起こっていないように見えますが、#jump1が常にずらさなければいけないという条件があるのなら、CSSでもできるかと思います。

CSS

1#jump1::before { 2 display: block; 3 height: 150px; 4 margin-top: -150px; 5 visibility: hidden; 6 content: ""; 7}

投稿2018/04/04 05:52

x_x

総合スコア13749

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

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

Yukos

2018/04/04 05:58

ご回答をありがとうございます。 画面がとても複雑なデザインで、cssを編集することで全体のデザインがずれてしまうため、jsで解決したいと思った次第です。説明が足りず申し訳ありません。
x_x

2018/04/04 06:01

表示されるものではないため、これを入れてもデザインがずれることはないかと思います。すでにbeforeに何かあるなら使えませんが
Yukos

2018/04/04 06:23

スマホ表示の場合にcssでできればと思い試してみました。 beforeは何もなかったので、試してみたのですが、表示位置が変わりませんでした。 なんとかjsでやってみたいと思います。ご回答をありがとうございます!
guest

0

ベストアンサー

私の環境では、問題なく動きましたが、JSの記述で気になったところがありました。

スコープの問題のような。
ifの外でpositionを定義して、そこでelseの処理を代入しちゃいましょう。

あと、$('a[href^="#"]')で、hrefが「#」で始まる要素にしかイベント走らないので、|| href == ""はいらないと思います。
それと$(e.target)$(this)でいいと思います。

javascript

1$(function(){ 2 $('a[href^="#"]').click(function(e) { 3 e.preventDefault();//これも追加しておきますか 4 var speed = 500; 5 var href= $(this).attr("href"); 6 var target = $(href == "#" ? 'html' : href); 7 var position = target.offset().top; 8 if($(this).hasClass("btn1")) { 9 position = target.offset().top - 150; 10 } 11 $('body,html').animate({scrollTop:position}, speed, 'swing'); 12 return false; 13 }); 14});

positionの計算のところは、150マイナスするだけなので、こちらの方がスッキリですかね。

javascript

1 if($(this).hasClass("btn1")) { 2 position -= 150; 3 }

投稿2018/04/04 05:25

編集2018/04/04 05:33
kszk311

総合スコア3404

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

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

m.ts10806

2018/04/04 05:37 編集

ああ!そうですね。私の回答勘違いありました。 htmlだと完全にページトップだから、それ以上マイナスには行けない、と考えて回答してしまっていました。
Yukos

2018/04/04 06:06

ありがとうございます!教えていただいたやり方で解決できました。 $(function() { $('a[href^="#"]').click(function(e) { e.preventDefault(); var speed = 500; var href = $(this).attr("href"); var target = $(href == "#" ? 'html' : href); var position = target.offset().top; if ($(this).hasClass("btn1")) { position -= 150; } $('body,html').animate({ scrollTop: position }, speed, 'swing'); return false; }); });
guest

0

当該のソースコードのHTMLが略して書かれてるかもしれない
という可能性を考慮して一応

HTML

1 2 <ul> 3 <li> 4 <a href="#hoge" class="btn1"> 5 <span>ボタン</span> 6 </a> 7 </li> 8 </ul>

みたいな感じで<a>の中にさらに要素があった場合e.targetは<a>ではなく
クリックイベントが発生した最初の要素、この場合は大体<span>になります
$(e.target) としているのは意図あってかもしれないですが
<a>がクラスを持つか、ということで判定したいのであれば
普通に$(this)でやる方がここではふさわしいかと思います

投稿2018/04/04 05:37

KazuhiroHatano

総合スコア7802

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

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

0

--基点を間違えていたので回答としては参考にならない内容となってしまっていました。失礼しました。

ひとまず - 150ではなく + 150ですね。

htmlでは一番左上の座標が0,0なので、-150とすると0,-150に移動しようとすることになります。
ただしブラウザ上はマイナスの座標には移動できないのでトップに止まったように見えます。
もしこれでも上手くいかない場合は'html'ではなく'body'としてみたり、「トップ」の基点を調整してみてください。
あと、考えられる可能性としては、対象のtopの位置が最上部より150pxより上の位置にあるとか、その辺りかなと。

投稿2018/04/04 05:12

編集2018/04/04 05:38
m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問