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

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

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

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

jQuery

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

Q&A

解決済

2回答

400閲覧

要素内でのスムーススクロールの実装

efu

総合スコア2

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2022/08/04 11:10

実現したいこと

ページ内に「overflow: scroll;」で内容を表示させている要素があります。
その外にページ内リンクを設置しており、リンククリックで該当の箇所までスムーススクロールで移動し、表示させたいです。

現在、下記の通り書いているのですが、移動位置が不安定です。

該当のソースコード

jqueryは「3.6.0」を読み込んでいます。
※jquery使用は必須ではありません。

html

1 <ul> 2 <li><a href="#link001">link001</a></li> 3 <li><a href="#link002">link002</a></li> 4 <li><a href="#link003">link003</a></li> 5 </ul> 6 <div id="scrollBox" style="height: 500px; overflow-x: auto; overflow-y: scroll; background-color: #ddd;"> 7 <p id="link001">link001</p> 8 <div style="height: 500px;"></div> 9 <p id="link002">link002</p> 10 <div style="height: 500px;"></div> 11 <p id="link003">link003</p> 12 <div style="height: 500px;"></div> 13 </div>

jquery

1 $(function(){ 2 $('a[href^="#"]').click(function(){ 3 var speed = 600; 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 var scroll = target.position(); 7 var position = scroll.top; 8 $("#scrollBox").animate({scrollTop:position}, speed, "swing"); 9 return false; 10 }); 11 });

当方、jsなどにはあまり詳しくなく、上記もコピペ文を少し書き換えたものになります。

こちらの実装方法についてご教示いただけますでしょうか。
よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

まず、position() で親要素に対する位置を取得するには、親要素のCSSにposition: relativeを設定しておく必要があります。ないと画面を基準とした位置になります。

html

1<div id="scrollBox" 2 style="height: 500px; overflow-x: auto; overflow-y: scroll; 3 background-color: #ddd; position: relative;">

次に、position() は要素の現在位置を取得します。つまり、スクロールするとその値が変化します。
その要素を親要素のトップにくるようにスクロールさせるには、現在位置に現在のスクロール位置を足す必要があります。現在のスクロール位置はscrollTop()で取得できます。

ということで、下記のコードでご希望の動作になると思います。

js

1$(function(){ 2 $('a[href^="#"]').click(function(){ 3 const speed = 600; 4 let href= $(this).attr("href"); 5 let target = $(href == "#" || href == "" ? 'html' : href); 6 let positionTop = target.position().top; 7 let scrollTop = $("#scrollBox").scrollTop(); 8 console.log(positionTop + " : " + scrollTop); 9 $("#scrollBox").animate({scrollTop:positionTop + scrollTop}, speed, "swing"); 10 return false; 11 }); 12});

console.log() で現在位置とスクロール位置を出力してますので、理解の助けにしてください。

投稿2022/08/04 16:24

hatena19

総合スコア33620

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

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

efu

2022/08/04 16:38

ご回答いただきありがとうございます。 初歩的なところからつまづいていたようでした、わかりやすいご指摘いただき助かります。 位置の計算につきましても理解できました。 これにより希望の動作ができました、本当にありがとうございます。
guest

0

これだとhrefが#link001などではなく"#"をクリックした時だと思うのですが、、、

$('a[href^="#"]').click(function(){ 省略 }

投稿2022/08/04 13:37

jem32o

総合スコア79

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

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

efu

2022/08/04 15:20

ご回答いただきありがとうございます。 当方書き方についてもよくわかっていないため、どう直せばよいかご教示いただけますと幸いです。 どうぞよろしくお願いいたします。
hatena19

2022/08/04 16:05

$('a[href^="#"]') で問題ないと思いますよ。^= は前方一致なので。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問